fix ui freezing due to images in feed changes (#17703)

* fix ui freezing due to images in feed changes

* minor fixes

* change the method to old as there may be case where only updatedValue will be there and we need to show in prettify way rather the showing default message

* fixes around typography styling

* reduce feed size to 25 to get better performance in case of large image feed in the first 25 feeds

(cherry picked from commit 5201a0dcaf0ff62b3f5c364d7a31fd0228800abd)

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx

@@ -12,7 +12,7 @@
  */
 import { Typography } from 'antd';
 import { isEmpty } from 'lodash';
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ReactComponent as FeedEmptyIcon } from '../../../assets/svg/activity-feed-no-data-placeholder.svg';
 import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
@@ -68,11 +68,36 @@ const ActivityFeedListV1 = ({
     }
   }, [entityThread, selectedThread, onFeedClick]);
 
+  const feeds = useMemo(
+    () =>
+      entityThread.map((feed) => (
+        <FeedPanelBodyV1
+          componentsVisibility={componentsVisibility}
+          feed={feed}
+          hidePopover={hidePopover}
+          isActive={activeFeedId === feed.id}
+          isForFeedTab={isForFeedTab}
+          key={feed.id}
+          showThread={showThread}
+          onFeedClick={onFeedClick}
+        />
+      )),
+    [
+      entityThread,
+      activeFeedId,
+      componentsVisibility,
+      hidePopover,
+      isForFeedTab,
+      showThread,
+    ]
+  );
+
   if (isLoading) {
     return <Loader />;
   }
 
-  return isEmpty(entityThread) ? (
+  if (isEmpty(entityThread)) {
+    return (
       <div
         className="h-full p-x-md"
         data-testid="no-data-placeholder-container"
@@ -87,20 +112,12 @@ const ActivityFeedListV1 = ({
           </Typography.Paragraph>
         </ErrorPlaceHolder>
       </div>
-  ) : (
+    );
+  }
+
+  return (
     <div className="feed-list-container p-md" id="feedData">
-      {entityThread.map((feed) => (
+      {feeds}
-        <FeedPanelBodyV1
-          componentsVisibility={componentsVisibility}
-          feed={feed}
-          hidePopover={hidePopover}
-          isActive={activeFeedId === feed.id}
-          isForFeedTab={isForFeedTab}
-          key={feed.id}
-          showThread={showThread}
-          onFeedClick={onFeedClick}
-        />
-      ))}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx

@@ -74,6 +74,11 @@ import {
   ActivityFeedTabs,
 } from './ActivityFeedTab.interface';
 
+const componentsVisibility = {
+  showThreadIcon: false,
+  showRepliesContainer: true,
+};
+
 export const ActivityFeedTab = ({
   fqn,
   owners = [],
@@ -429,10 +434,7 @@ export const ActivityFeedTab = ({
         <ActivityFeedListV1
           hidePopover
           activeFeedId={selectedThread?.id}
-          componentsVisibility={{
+          componentsVisibility={componentsVisibility}
-            showThreadIcon: false,
-            showRepliesContainer: true,
-          }}
           emptyPlaceholderText={placeholderText}
           feedList={entityThread}
           isForFeedTab={isForFeedTab}

openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/FeedsWidget/FeedsWidget.component.tsx

@@ -17,7 +17,7 @@ import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
-import { PAGE_SIZE_LARGE, ROUTES } from '../../../../constants/constants';
+import { PAGE_SIZE_MEDIUM, ROUTES } from '../../../../constants/constants';
 import { FEED_COUNT_INITIAL_DATA } from '../../../../constants/entity.constants';
 import { mockFeedData } from '../../../../constants/mockTourData.constants';
 import { useTourProvider } from '../../../../context/TourProvider/TourProvider';
@@ -70,7 +70,7 @@ const FeedsWidget = ({
         undefined,
         undefined,
         undefined,
-        PAGE_SIZE_LARGE
+        PAGE_SIZE_MEDIUM
       );
     } else if (activeTab === ActivityFeedTabs.MENTIONS) {
       getFeedData(FeedFilter.MENTIONS);
@@ -175,6 +175,21 @@ const FeedsWidget = ({
     !isUndefined(handleRemoveWidget) && handleRemoveWidget(widgetKey);
   }, [widgetKey]);
 
+  const emptyPlaceholderText = useMemo(
+    () => (
+      <Transi18next
+        i18nKey="message.no-activity-feed"
+        renderElement={
+          <Link rel="noreferrer" to={{ pathname: ROUTES.EXPLORE }} />
+        }
+        values={{
+          explored: t('message.have-not-explored-yet'),
+        }}
+      />
+    ),
+    []
+  );
+
   return (
     <div
       className="feeds-widget-container h-full"
@@ -189,20 +204,7 @@ const FeedsWidget = ({
             children: (
               <>
                 <ActivityFeedListV1
-                  emptyPlaceholderText={
+                  emptyPlaceholderText={emptyPlaceholderText}
-                    <Transi18next
-                      i18nKey="message.no-activity-feed"
-                      renderElement={
-                        <Link
-                          rel="noreferrer"
-                          to={{ pathname: ROUTES.EXPLORE }}
-                        />
-                      }
-                      values={{
-                        explored: t('message.have-not-explored-yet'),
-                      }}
-                    />
-                  }
                   feedList={isTourOpen ? mockFeedData : threads}
                   hidePopover={isEditView}
                   isLoading={loading && !isTourOpen}

openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/FeedsWidget/FeedsWidget.test.tsx

@@ -12,7 +12,7 @@
  */
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { PAGE_SIZE_LARGE } from '../../../../constants/constants';
+import { PAGE_SIZE_MEDIUM } from '../../../../constants/constants';
 import { useApplicationStore } from '../../../../hooks/useApplicationStore';
 import { mockUserData } from '../../../Settings/Users/mocks/User.mocks';
 import FeedsWidget from './FeedsWidget.component';
@@ -134,7 +134,7 @@ describe('FeedsWidget', () => {
       undefined,
       undefined,
       undefined,
-      PAGE_SIZE_LARGE
+      PAGE_SIZE_MEDIUM
     );
   });
 
@@ -154,7 +154,7 @@ describe('FeedsWidget', () => {
       undefined,
       undefined,
       undefined,
-      PAGE_SIZE_LARGE
+      PAGE_SIZE_MEDIUM
     );
   });
 

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -154,6 +154,9 @@ a[href].link-text-grey,
 .text-underline {
   text-decoration: underline;
 }
+.text-line-through {
+  text-decoration: line-through;
+}
 
 // image property
 

openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx

@@ -137,33 +137,31 @@ export const getDiffValue = (oldValue: string, newValue: string) => {
 
 export const getAddedDiffElement = (text: string) => {
   return (
-    <Typography.Text
+    <span
-      underline
+      className="diff-added text-underline"
-      className="diff-added"
       data-testid="diff-added"
       key={uniqueId()}>
       {text}
-    </Typography.Text>
+    </span>
   );
 };
 
 export const getRemovedDiffElement = (text: string) => {
   return (
-    <Typography.Text
+    <span
-      delete
+      className="text-grey-muted text-line-through"
-      className="text-grey-muted"
       data-testid="diff-removed"
       key={uniqueId()}>
       {text}
-    </Typography.Text>
+    </span>
   );
 };
 
 export const getNormalDiffElement = (text: string) => {
   return (
-    <Typography.Text data-testid="diff-normal" key={uniqueId()}>
+    <span data-testid="diff-normal" key={uniqueId()}>
       {text}
-    </Typography.Text>
+    </span>
   );
 };
 
@@ -172,10 +170,18 @@ export const getTextDiff = (
   newText: string,
   latestText?: string
 ) => {
+  const imagePlaceholder = 'data:image';
   if (isEmpty(oldText) && isEmpty(newText)) {
     return latestText ?? '';
   }
 
+  if (
+    newText.includes(imagePlaceholder) ||
+    oldText.includes(imagePlaceholder)
+  ) {
+    return newText;
+  }
+
   const diffArr = diffWords(toString(oldText), toString(newText));
 
   const result = diffArr.map((diff) => {