MINOR: added loader in activity feed open and closed count (#18274)

* added loader in activity feed open and closed count * minor push * added loader to entire label instead just on number
2026-01-05 20:17:07 +00:00 · 2024-10-15 16:39:20 +05:30 · 2024-10-15 16:39:20 +05:30 · 7d91e1206d
commit 7d91e1206d
parent 5cc1299999
4 changed files with 126 additions and 87 deletions
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts
@ -156,7 +156,9 @@ export const checkTaskCount = async (
  openTask = 0,
  closedTask = 0
 ) => {
-  await page.waitForLoadState('networkidle');
+  await page.waitForSelector('.ant-skeleton-element ', {
+    state: 'detached',
+  });

  const openTaskElement = await page.getByTestId('open-task').textContent();

--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx
@ -10,12 +10,13 @@
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
-import { Menu, Space, Typography } from 'antd';
+import { Menu, Skeleton, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { noop } from 'lodash';
 import {
  default as React,
+  ReactNode,
  RefObject,
  useCallback,
  useEffect,
@ -108,7 +109,13 @@ export const ActivityFeedTab = ({
  const [taskFilter, setTaskFilter] = useState<ThreadTaskStatus>(
    ThreadTaskStatus.Open
  );
-  const [count, setCount] = useState<FeedCounts>(FEED_COUNT_INITIAL_DATA);
+  const [countData, setCountData] = useState<{
+    loading: boolean;
+    data: FeedCounts;
+  }>({
+    loading: false,
+    data: FEED_COUNT_INITIAL_DATA,
+  });

  const {
    postFeed,
@ -139,6 +146,17 @@ export const ActivityFeedTab = ({
    [activeTab]
  );

+  const getElementWithCountLoader = useCallback(
+    (element: ReactNode) => {
+      if (countData.loading) {
+        return <Skeleton.Button active className="count-loader" size="small" />;
+      }
+
+      return element;
+    },
+    [countData.loading]
+  );
+
  const handleTabChange = (subTab: string) => {
    history.push(
      entityUtilClassBase.getEntityLink(
@ -169,29 +187,37 @@ export const ActivityFeedTab = ({
    }
  }, [activeTab]);

-  const handleFeedCount = useCallback((data: FeedCounts) => {
-    setCount(data);
-    onUpdateFeedCount?.(data);
-  }, []);
+  const handleFeedCount = useCallback(
+    (data: FeedCounts) => {
+      setCountData((prev) => ({ ...prev, data }));
+      onUpdateFeedCount?.(data);
+    },
+    [setCountData]
+  );

  const fetchFeedsCount = async () => {
+    setCountData((prev) => ({ ...prev, loading: true }));
    if (isUserEntity) {
      try {
        const res = await getFeedCount(getEntityUserLink(fqn));
-        setCount({
-          conversationCount: res[0].conversationCount ?? 0,
-          totalTasksCount: res[0].totalTaskCount,
-          openTaskCount: res[0].openTaskCount ?? 0,
-          closedTaskCount: res[0].closedTaskCount ?? 0,
-          totalCount: res[0].conversationCount ?? 0 + res[0].totalTaskCount,
-          mentionCount: res[0].mentionCount ?? 0,
-        });
+        setCountData((prev) => ({
+          ...prev,
+          data: {
+            conversationCount: res[0].conversationCount ?? 0,
+            totalTasksCount: res[0].totalTaskCount,
+            openTaskCount: res[0].openTaskCount ?? 0,
+            closedTaskCount: res[0].closedTaskCount ?? 0,
+            totalCount: res[0].conversationCount ?? 0 + res[0].totalTaskCount,
+            mentionCount: res[0].mentionCount ?? 0,
+          },
+        }));
      } catch (err) {
        showErrorToast(err as AxiosError, t('server.entity-feed-fetch-error'));
      }
    } else {
-      getFeedCounts(entityType, fqn, handleFeedCount);
+      await getFeedCounts(entityType, fqn, handleFeedCount);
    }
+    setCountData((prev) => ({ ...prev, loading: false }));
  };

  const getThreadType = useCallback((activeTab) => {
@ -239,7 +265,7 @@ export const ActivityFeedTab = ({

  const refetchFeedData = useCallback(() => {
    if (
-      entityFeedTotalCount !== count.totalCount &&
+      entityFeedTotalCount !== countData.data.totalCount &&
      isActivityFeedTab &&
      refetchFeed
    ) {
@ -259,7 +285,7 @@ export const ActivityFeedTab = ({
    threadType,
    entityType,
    refetchFeed,
-    count.totalCount,
+    countData.data.totalCount,
    entityFeedTotalCount,
    isActivityFeedTab,
  ]);
@ -338,7 +364,7 @@ export const ActivityFeedTab = ({
                <span>
                  {!isUserEntity &&
                    getCountBadge(
-                      count.conversationCount,
+                      countData.data.conversationCount,
                      '',
                      activeTab === ActivityFeedTabs.ALL
                    )}
@ -362,7 +388,7 @@ export const ActivityFeedTab = ({

                      <span>
                        {getCountBadge(
-                          count.mentionCount,
+                          countData.data.mentionCount,
                          '',
                          activeTab === ActivityFeedTabs.MENTIONS
                        )}
@ -384,7 +410,11 @@ export const ActivityFeedTab = ({
                  <span>{t('label.task-plural')}</span>
                </Space>
                <span>
-                  {getCountBadge(count.openTaskCount, '', isTaskActiveTab)}
+                  {getCountBadge(
+                    countData.data.openTaskCount,
+                    '',
+                    isTaskActiveTab
+                  )}
                </span>
              </div>
            ),
@ -400,33 +430,37 @@ export const ActivityFeedTab = ({
      <div className="center-container" id="center-container">
        {isTaskActiveTab && (
          <div className="d-flex gap-4 p-sm p-x-lg activity-feed-task">
-            <Typography.Text
-              className={classNames(
-                'cursor-pointer p-l-xss d-flex items-center',
-                {
-                  'font-medium': taskFilter === ThreadTaskStatus.Open,
-                }
-              )}
-              data-testid="open-task"
-              onClick={() => {
-                handleUpdateTaskFilter(ThreadTaskStatus.Open);
-                setActiveThread();
-              }}>
-              <TaskIcon className="m-r-xss" width={14} /> {count.openTaskCount}{' '}
-              {t('label.open')}
-            </Typography.Text>
-            <Typography.Text
-              className={classNames('cursor-pointer d-flex items-center', {
-                'font-medium': taskFilter === ThreadTaskStatus.Closed,
-              })}
-              data-testid="closed-task"
-              onClick={() => {
-                handleUpdateTaskFilter(ThreadTaskStatus.Closed);
-                setActiveThread();
-              }}>
-              <CheckIcon className="m-r-xss" width={14} />{' '}
-              {count.closedTaskCount} {t('label.closed')}
-            </Typography.Text>
+            {getElementWithCountLoader(
+              <Typography.Text
+                className={classNames(
+                  'cursor-pointer p-l-xss d-flex items-center',
+                  {
+                    'font-medium': taskFilter === ThreadTaskStatus.Open,
+                  }
+                )}
+                data-testid="open-task"
+                onClick={() => {
+                  handleUpdateTaskFilter(ThreadTaskStatus.Open);
+                  setActiveThread();
+                }}>
+                <TaskIcon className="m-r-xss" width={14} />{' '}
+                {countData.data.openTaskCount} {t('label.open')}
+              </Typography.Text>
+            )}
+            {getElementWithCountLoader(
+              <Typography.Text
+                className={classNames('cursor-pointer d-flex items-center', {
+                  'font-medium': taskFilter === ThreadTaskStatus.Closed,
+                })}
+                data-testid="closed-task"
+                onClick={() => {
+                  handleUpdateTaskFilter(ThreadTaskStatus.Closed);
+                  setActiveThread();
+                }}>
+                <CheckIcon className="m-r-xss" width={14} />{' '}
+                {countData.data.closedTaskCount} {t('label.closed')}
+              </Typography.Text>
+            )}
          </div>
        )}
        <ActivityFeedListV1
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less
@ -51,3 +51,7 @@
 .activity-feed-task {
  background-color: @grey-1;
 }
+
+.count-loader.ant-skeleton-element .ant-skeleton-button-sm {
+  width: 72px;
+}
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@ -517,52 +517,51 @@ export const replaceAllSpacialCharWith_ = (text: string) => {
 * @param onDataFetched - callback function which return FeedCounts object
 */

-export const getFeedCounts = (
+export const getFeedCounts = async (
  entityType: string,
  entityFQN: string,
  feedCountCallback: (countValue: FeedCounts) => void
 ) => {
-  getFeedCount(getEntityFeedLink(entityType, entityFQN))
-    .then((res) => {
-      if (res) {
-        const {
-          conversationCount,
-          openTaskCount,
-          closedTaskCount,
-          totalTasksCount,
-          totalCount,
-          mentionCount,
-        } = res.reduce((acc, item) => {
-          const conversationCount =
-            acc.conversationCount + (item.conversationCount || 0);
-          const totalTasksCount =
-            acc.totalTasksCount + (item.totalTaskCount || 0);
+  try {
+    const res = await getFeedCount(getEntityFeedLink(entityType, entityFQN));
+    if (res) {
+      const {
+        conversationCount,
+        openTaskCount,
+        closedTaskCount,
+        totalTasksCount,
+        totalCount,
+        mentionCount,
+      } = res.reduce((acc, item) => {
+        const conversationCount =
+          acc.conversationCount + (item.conversationCount || 0);
+        const totalTasksCount =
+          acc.totalTasksCount + (item.totalTaskCount || 0);

-          return {
-            conversationCount,
-            totalTasksCount,
-            openTaskCount: acc.openTaskCount + (item.openTaskCount || 0),
-            closedTaskCount: acc.closedTaskCount + (item.closedTaskCount || 0),
-            totalCount: conversationCount + totalTasksCount,
-            mentionCount: acc.mentionCount + (item.mentionCount || 0),
-          };
-        }, FEED_COUNT_INITIAL_DATA);
-
-        feedCountCallback({
+        return {
          conversationCount,
          totalTasksCount,
-          openTaskCount,
-          closedTaskCount,
-          totalCount,
-          mentionCount,
-        });
-      } else {
-        throw t('server.entity-feed-fetch-error');
-      }
-    })
-    .catch((err: AxiosError) => {
-      showErrorToast(err, t('server.entity-feed-fetch-error'));
-    });
+          openTaskCount: acc.openTaskCount + (item.openTaskCount || 0),
+          closedTaskCount: acc.closedTaskCount + (item.closedTaskCount || 0),
+          totalCount: conversationCount + totalTasksCount,
+          mentionCount: acc.mentionCount + (item.mentionCount || 0),
+        };
+      }, FEED_COUNT_INITIAL_DATA);
+
+      feedCountCallback({
+        conversationCount,
+        totalTasksCount,
+        openTaskCount,
+        closedTaskCount,
+        totalCount,
+        mentionCount,
+      });
+    } else {
+      throw t('server.entity-feed-fetch-error');
+    }
+  } catch (err) {
+    showErrorToast(err as AxiosError, t('server.entity-feed-fetch-error'));
+  }
 };

 /**