change sidebar tag icon

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

@@ -86,7 +86,7 @@ const SidebarNav: FC<Props> = (props: Props) => {
         <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onItemSelected={onItemSelected} />
         {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
         {/* <PrimaryItem id="favorite" label="Favorite" iconName="fa fa-bookmark-o" /> */}
-        <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="tag" onItemSelected={onItemSelected} />
+        <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onItemSelected={onItemSelected} />
         {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
         {/* eslint-enable max-len */}
       </div>

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

@@ -12,7 +12,7 @@ const LIMIT = 10;
 const Tag: FC = () => {
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate: mutateTagDataList } = useSWRxTagDataList(LIMIT, offset);
+  const { data: tagDataList, mutate: mutateTagDataList, error } = useSWRxTagDataList(LIMIT, offset);
   const tagData: ITagCountHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
 
@@ -27,8 +27,17 @@ const Tag: FC = () => {
     mutateTagDataList();
   }, [mutateTagDataList]);
 
-  // todo: consider loading state by designer's advice
-  if (!tagDataList) return <div>{t('Loading')}</div>;
+
+  // 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 (

packages/app/src/stores/tag.tsx

@@ -1,9 +1,25 @@
-import { SWRResponse } from 'swr';
+import useSWR, { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
+import { ITagCountHasId } from '~/interfaces/tag';
+import { apiGet } from '~/client/util/apiv1-client';
 
-import { ITagsListApiv1Result } from '~/interfaces/tag';
+type ITagDataListResponse = {
+  data: ITagCountHasId[],
+  totalCount: number,
+}
 
-import { apiGet } from '../client/util/apiv1-client';
+export const useSWRxTagDataList = (
+    limit: number,
+    offset: number,
+): SWRResponse<ITagDataListResponse, Error> => {
+  return useSWR(
+    `/tags.list?limit=${limit}&offset=${offset}`,
+    endpoint => apiGet(endpoint).then((response: ITagDataListResponse) => {
+      return {
+        data: response.data,
+        totalCount: response.totalCount,
+      };
+}))};
 
 
 export const useSWRxTagsList = (limit?: number, offset?: number): SWRResponse<ITagsListApiv1Result, Error> => {