add spinner

packages/app/src/components/Sidebar/Tag.tsx

@@ -15,6 +15,7 @@ const Tag: FC = () => {
   const { data: tagDataList, mutate: mutateTagDataList, error } = useSWRxTagDataList(LIMIT, offset);
   const tagData: ITagCountHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
+  const isLoading = tagDataList === undefined && error == null;
 
   const { t } = useTranslation('');
 
@@ -27,18 +28,6 @@ const Tag: FC = () => {
     mutateTagDataList();
   }, [mutateTagDataList]);
 
-
-  // if (!tagDataList) return <div>{t('Loading')}</div>;
-
-  const isLoading = tagDataList === undefined && error == null;
-  if (isLoading) {
-    return (
-      <div className="text-muted text-center">
-        <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
-      </div>
-    );
-  }
-
   // todo: adjust design by XD
   return (
     <div className="grw-container-convertible px-4 mb-5 pb-5">
@@ -57,6 +46,7 @@ const Tag: FC = () => {
       <div className="px-3 text-center">
         <TagCloudBox tags={tagData} />
       </div>
+
       <div className="d-flex justify-content-center my-5">
         <button
           className="btn btn-primary rounded px-5"
@@ -66,13 +56,23 @@ const Tag: FC = () => {
           {t('Check All tags')}
         </button>
       </div>
-      <TagList
-        tagData={tagData}
-        totalTags={totalCount}
-        activePage={1 + (offset / 10)} // activePage = 1 + offset / 10
-        onChangePage={setOffsetByPageNumber}
-        limit={LIMIT}
-      />
+
+      { isLoading
+        ? (
+          <div className="text-muted text-center">
+            <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
+          </div>
+        )
+        : (
+          <TagList
+            tagData={tagData}
+            totalTags={totalCount}
+            activePage={1 + (offset / 10)} // activePage = 1 + offset / 10
+            onChangePage={setOffsetByPageNumber}
+            limit={LIMIT}
+          />
+        )
+      }
     </div>
   );
 

packages/app/src/components/TagPage.tsx

@@ -12,9 +12,10 @@ const LIMIT = 10;
 const TagPage: FC = () => {
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList } = useSWRxTagDataList(LIMIT, offset);
+  const { data: tagDataList, error } = useSWRxTagDataList(LIMIT, offset);
   const tagData: ITagCountHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
+  const isLoading = tagDataList === undefined && error == null;
 
   const { t } = useTranslation('');
 
@@ -23,9 +24,6 @@ const TagPage: FC = () => {
     setOffset((selectedPageNumber - 1) * 10);
   }, []);
 
-  // todo: consider loading state by designer's advice
-  if (!tagDataList) return <div>{t('Loading')}</div>;
-
   // todo: adjust margin and redesign tags page
   return (
     <div className="grw-container-convertible mb-5 pb-5">
@@ -33,13 +31,22 @@ const TagPage: FC = () => {
       <div className="px-3 text-center">
         <TagCloudBox tags={tagData} minSize={20} />
       </div>
-      <TagList
-        tagData={tagData}
-        totalTags={totalCount}
-        activePage={1 + (offset / 10)} // activePage = 1 + offset / 10
-        onChangePage={setOffsetByPageNumber}
-        limit={LIMIT}
-      />
+      { isLoading
+        ? (
+          <div className="text-muted text-center">
+            <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
+          </div>
+        )
+        : (
+          <TagList
+            tagData={tagData}
+            totalTags={totalCount}
+            activePage={1 + (offset / 10)} // activePage = 1 + offset / 10
+            onChangePage={setOffsetByPageNumber}
+            limit={LIMIT}
+          />
+        )
+      }
     </div>
   );