clean codes and add loading to TagPage.tsx and Tag.tsx

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

@@ -5,21 +5,16 @@ import TagList from '../TagList';
 import TagCloudBox from '../TagCloudBox';
 
 import { useSWRxTagList } from '~/stores/tag';
-
 import { toastError } from '~/client/util/apiNotification';
 import { ITagDataHasId } from '~/interfaces/tag';
 
 const LIMIT = 10;
 
 const Tag: FC = () => {
-
-  // const [tagData, setTagData] = useState<ITagDataHasId[]>([]);
-  // const [totalTags, setTotalTags] = useState<number>(0);
   const [isOnReload, setIsOnReload] = useState<boolean>(false);
-
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate } = useSWRxTagList(LIMIT, offset);
+  const { data: tagDataList, mutate: mutateTagDataList } = useSWRxTagList(LIMIT, offset);
   const tagData: ITagDataHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
 
@@ -29,7 +24,7 @@ const Tag: FC = () => {
     setOffset((selectedPageNumber - 1) * LIMIT);
 
     try {
-      mutate();
+      mutateTagDataList();
     }
     catch (error) {
       toastError(error);
@@ -42,6 +37,7 @@ const Tag: FC = () => {
     setIsOnReload(true);
   };
 
+  if (!tagDataList) return <div>{t('Loading')}</div>;
 
   return (
     <div className="grw-container-convertible px-4 mb-5 pb-5">

packages/app/src/components/TagPage.tsx

@@ -6,17 +6,14 @@ import TagCloudBox from './TagCloudBox';
 
 import { useSWRxTagList } from '~/stores/tag';
 import { toastError } from '~/client/util/apiNotification';
-
 import { ITagDataHasId } from '~/interfaces/tag';
 
-
 const LIMIT = 10;
 
 const TagPage: FC = () => {
-
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate } = useSWRxTagList(LIMIT, offset);
+  const { data: tagDataList, mutate: mutatetagDataList } = useSWRxTagList(LIMIT, offset);
   const tagData: ITagDataHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
 
@@ -26,7 +23,7 @@ const TagPage: FC = () => {
     setOffset((selectedPageNumber - 1) * LIMIT);
 
     try {
-      mutate();
+      mutatetagDataList();
     }
     catch (error) {
       toastError(error);
@@ -34,9 +31,11 @@ const TagPage: FC = () => {
 
   };
 
+  if (!tagDataList) return <div>{t('Loading')}</div>;
+
   return (
     <div className="grw-container-convertible mb-5 pb-5">
-      <h2 className="my-3">{`${t('Tags')}${totalCount}`}</h2>
+      <h2 className="my-3">{`${t('Tags')}(${totalCount})`}</h2>
       <div className="px-3 text-center">
         <TagCloudBox tags={tagData} minSize={20} />
       </div>