fix ui freezing due to images in feed changes

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,28 +68,9 @@ const ActivityFeedListV1 = ({
     }
   }, [entityThread, selectedThread, onFeedClick]);
 
-  if (isLoading) {
-    return <Loader />;
-  }
-
-  return isEmpty(entityThread) ? (
-    <div
-      className="h-full p-x-md"
-      data-testid="no-data-placeholder-container"
-      id="feedData">
-      <ErrorPlaceHolder
-        icon={<FeedEmptyIcon height={SIZE.X_SMALL} width={SIZE.X_SMALL} />}
-        type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
-        <Typography.Paragraph
-          className="tw-max-w-md"
-          style={{ marginBottom: '0' }}>
-          {emptyPlaceholderText}
-        </Typography.Paragraph>
-      </ErrorPlaceHolder>
-    </div>
-  ) : (
-    <div className="feed-list-container p-md" id="feedData">
-      {entityThread.map((feed) => (
+  const feeds = useMemo(
+    () =>
+      entityThread.map((feed) => (
         <FeedPanelBodyV1
           componentsVisibility={componentsVisibility}
           feed={feed}
@@ -100,7 +81,43 @@ const ActivityFeedListV1 = ({
           showThread={showThread}
           onFeedClick={onFeedClick}
         />
-      ))}
+      )),
+    [
+      entityThread,
+      activeFeedId,
+      componentsVisibility,
+      hidePopover,
+      isForFeedTab,
+      showThread,
+    ]
+  );
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (isEmpty(entityThread)) {
+    return (
+      <div
+        className="h-full p-x-md"
+        data-testid="no-data-placeholder-container"
+        id="feedData">
+        <ErrorPlaceHolder
+          icon={<FeedEmptyIcon height={SIZE.X_SMALL} width={SIZE.X_SMALL} />}
+          type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+          <Typography.Paragraph
+            className="tw-max-w-md"
+            style={{ marginBottom: '0' }}>
+            {emptyPlaceholderText}
+          </Typography.Paragraph>
+        </ErrorPlaceHolder>
+      </div>
+    );
+  }
+
+  return (
+    <div className="feed-list-container p-md" id="feedData">
+      {feeds}
     </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={{
-            showThreadIcon: false,
-            showRepliesContainer: true,
-          }}
+          componentsVisibility={componentsVisibility}
           emptyPlaceholderText={placeholderText}
           feedList={entityThread}
           isForFeedTab={isForFeedTab}

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

@@ -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={
-                    <Transi18next
-                      i18nKey="message.no-activity-feed"
-                      renderElement={
-                        <Link
-                          rel="noreferrer"
-                          to={{ pathname: ROUTES.EXPLORE }}
-                        />
-                      }
-                      values={{
-                        explored: t('message.have-not-explored-yet'),
-                      }}
-                    />
-                  }
+                  emptyPlaceholderText={emptyPlaceholderText}
                   feedList={isTourOpen ? mockFeedData : threads}
                   hidePopover={isEditView}
                   isLoading={loading && !isTourOpen}

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
-      underline
-      className="diff-added"
+    <span
+      className="diff-added text-underline"
       data-testid="diff-added"
       key={uniqueId()}>
       {text}
-    </Typography.Text>
+    </span>
   );
 };
 
 export const getRemovedDiffElement = (text: string) => {
   return (
-    <Typography.Text
-      delete
-      className="text-grey-muted"
+    <span
+      className="text-grey-muted text-line-through"
       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) => {