From 5097a9cf1603154e236512a90ca2496300d455f9 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <aniketkatkar97@gmail.com>
Date: Thu, 22 Dec 2022 10:41:20 +0530
Subject: [PATCH] Added skeleton loader for 'My Data' and 'Following' Section
 on home page (#9476)

Fixed counts mismatch for view all button in 'My Data' Section
---
 .../src/components/EntityList/EntityList.tsx  | 72 ++++++++++---------
 .../components/MyData/MyData.component.tsx    |  5 +-
 .../src/components/MyData/MyData.interface.ts |  1 +
 .../ui/src/components/MyData/MyData.test.tsx  |  1 +
 .../pages/MyDataPage/MyDataPage.component.tsx | 17 +++--
 .../pages/tour-page/TourPage.component.tsx    |  1 +
 6 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
index 1007f95cd66..a364c20d3c2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Card, Typography } from 'antd';
+import { Button, Card, Skeleton, Typography } from 'antd';
 import React, { Fragment, FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -27,6 +27,7 @@ interface Prop {
 }
 
 interface AntdEntityListProp {
+  isLoadingOwnedData?: boolean;
   entityList: Array<EntityReference>;
   headerText?: string | JSX.Element;
   headerTextLabel: string;
@@ -86,45 +87,50 @@ export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
   headerTextLabel,
   noDataPlaceholder,
   testIDText,
+  isLoadingOwnedData,
 }: AntdEntityListProp) => {
   return (
     <Card
       extra={headerText}
       style={leftPanelAntCardStyle}
       title={headerTextLabel}>
-      {entityList.length
-        ? entityList.map((item, index) => {
-            return (
-              <div
-                className="flex items-center justify-between"
-                data-testid={`${testIDText}-${getEntityName(
-                  item as unknown as EntityReference
-                )}`}
-                key={index}>
-                <div className="flex items-center">
-                  {getEntityIcon(item.type || '')}
-                  <Link
-                    className="font-medium"
-                    to={getEntityLink(
-                      item.type || '',
-                      item.fullyQualifiedName as string
-                    )}>
-                    <Button
-                      className="entity-button"
-                      title={getEntityName(item as unknown as EntityReference)}
-                      type="text">
-                      <Typography.Text
-                        className="w-48 text-left"
-                        ellipsis={{ tooltip: true }}>
-                        {getEntityName(item as unknown as EntityReference)}
-                      </Typography.Text>
-                    </Button>
-                  </Link>
-                </div>
+      {isLoadingOwnedData ? (
+        <Skeleton active />
+      ) : entityList.length ? (
+        entityList.map((item, index) => {
+          return (
+            <div
+              className="flex items-center justify-between"
+              data-testid={`${testIDText}-${getEntityName(
+                item as unknown as EntityReference
+              )}`}
+              key={index}>
+              <div className="flex items-center">
+                {getEntityIcon(item.type || '')}
+                <Link
+                  className="font-medium"
+                  to={getEntityLink(
+                    item.type || '',
+                    item.fullyQualifiedName as string
+                  )}>
+                  <Button
+                    className="entity-button"
+                    title={getEntityName(item as unknown as EntityReference)}
+                    type="text">
+                    <Typography.Text
+                      className="w-48 text-left"
+                      ellipsis={{ tooltip: true }}>
+                      {getEntityName(item as unknown as EntityReference)}
+                    </Typography.Text>
+                  </Button>
+                </Link>
               </div>
-            );
-          })
-        : noDataPlaceholder}
+            </div>
+          );
+        })
+      ) : (
+        noDataPlaceholder
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
index 29f57adf56b..84800ec41b2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@@ -60,6 +60,7 @@ const MyData: React.FC<MyDataProps> = ({
   fetchFeedHandler,
   paging,
   updateThreadHandler,
+  isLoadingOwnedData,
 }: MyDataProps): React.ReactElement => {
   const isMounted = useRef(false);
   const [elementRef, isInView] = useInfiniteScroll(observerOptions);
@@ -138,6 +139,7 @@ const MyData: React.FC<MyDataProps> = ({
               </>
             }
             headerTextLabel="My Data"
+            isLoadingOwnedData={isLoadingOwnedData}
             noDataPlaceholder={<>You have not owned anything yet.</>}
             testIDText="My data"
           />
@@ -166,6 +168,7 @@ const MyData: React.FC<MyDataProps> = ({
               </>
             }
             headerTextLabel="Following"
+            isLoadingOwnedData={isLoadingOwnedData}
             noDataPlaceholder={<>You have not followed anything yet.</>}
             testIDText="Following data"
           />
@@ -173,7 +176,7 @@ const MyData: React.FC<MyDataProps> = ({
         <div className="tw-mt-5" />
       </>
     );
-  }, [ownedData, followedData, pendingTaskCount]);
+  }, [ownedData, followedData, pendingTaskCount, isLoadingOwnedData]);
 
   const fetchMoreFeed = useCallback(
     (isElementInView: boolean, pagingObj: Paging) => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts
index edd0381a872..a815f44169a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts
@@ -31,6 +31,7 @@ export interface MyDataProps {
   userDetails?: User;
   ownedData: Array<EntityReference>;
   followedData: Array<EntityReference>;
+  isLoadingOwnedData: boolean;
   feedData: Thread[];
   paging: Paging;
   isFeedLoading: boolean;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
index c07c832b07c..596c80a6de0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
@@ -340,6 +340,7 @@ const mockProp: MyDataProps = {
   fetchFeedHandler: mockFetchFeedHandler,
   followedData: currentUserMockData,
   isFeedLoading: false,
+  isLoadingOwnedData: false,
   ownedData: currentUserMockData,
   paging: mockPaging,
   postFeedHandler: postFeed,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
index d4abd4aa115..02922fd6182 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
@@ -60,6 +60,7 @@ const MyDataPage = () => {
 
   const [entityThread, setEntityThread] = useState<Thread[]>([]);
   const [isFeedLoading, setIsFeedLoading] = useState<boolean>(false);
+  const [isLoadingOwnedData, setIsLoadingOwnedData] = useState<boolean>(false);
   const [isSandbox, setIsSandbox] = useState<boolean>(false);
 
   const [activityFeeds, setActivityFeeds] = useState<Thread[]>([]);
@@ -104,6 +105,7 @@ const MyDataPage = () => {
     if (!currentUser || !currentUser.id) {
       return;
     }
+    setIsLoadingOwnedData(true);
     try {
       const userData = await getUserById(currentUser?.id, 'follows, owns');
 
@@ -112,15 +114,15 @@ const MyDataPage = () => {
         const owns: EntityReference[] = userData.owns ?? [];
         const follows: EntityReference[] = userData.follows ?? [];
 
-        setFollowedDataCount(follows.length);
-        setOwnedDataCount(owns.length);
-
-        const includedOwnsData = owns.filter((data) =>
-          includeData.includes(data.type as AssetsType)
-        );
         const includedFollowsData = follows.filter((data) =>
           includeData.includes(data.type as AssetsType)
         );
+        const includedOwnsData = owns.filter((data) =>
+          includeData.includes(data.type as AssetsType)
+        );
+
+        setFollowedDataCount(includedFollowsData.length);
+        setOwnedDataCount(includedOwnsData.length);
 
         setFollowedData(includedFollowsData.slice(0, 8));
         setOwnedData(includedOwnsData.slice(0, 8));
@@ -128,6 +130,8 @@ const MyDataPage = () => {
     } catch (err) {
       setOwnedData([]);
       setFollowedData([]);
+    } finally {
+      setIsLoadingOwnedData(false);
     }
   };
 
@@ -307,6 +311,7 @@ const MyDataPage = () => {
             followedData={followedData || []}
             followedDataCount={followedDataCount}
             isFeedLoading={isFeedLoading}
+            isLoadingOwnedData={isLoadingOwnedData}
             ownedData={ownedData || []}
             ownedDataCount={ownedDataCount}
             paging={paging}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx
index eecadc38a10..d7c3af5537c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx
@@ -139,6 +139,7 @@ const TourPage = () => {
             followedData={[]}
             followedDataCount={1}
             isFeedLoading={false}
+            isLoadingOwnedData={false}
             ownedData={[]}
             ownedDataCount={1}
             paging={{} as Paging}