add Skeleton

dashboard/src/components/corpus/ChapterTagList.tsx

@@ -4,6 +4,7 @@ import { get } from "../../request";
 import type { ChannelFilterProps } from "../channel/ChannelList";
 import { ITagData } from "./ChapterTag";
 import TagArea from "../tag/TagArea";
+import { Skeleton } from "antd";
 
 interface IAppendTagData {
   id: string;
@@ -38,37 +39,44 @@ const ChapterTagListWidget = ({
   onTagClick,
 }: IWidget) => {
   const [tag, setTag] = useState<ITagData[]>([]);
+  const [load, setLoad] = useState(true);
 
   useEffect(() => {
     const strTags = tags.length > 0 ? "&tags=" + tags.join() : "";
     const url = `/v2/tag?view=chapter${strTags}&progress=${progress}&lang=${lang}&channel_type=${type}`;
     console.log("tag list ajax", url);
-    get<IChapterTagResponse>(url).then((json) => {
-      if (json.ok) {
-        if (json.data.count === 0) {
-          setTag([]);
+    setLoad(true);
+    get<IChapterTagResponse>(url)
+      .then((json) => {
+        if (json.ok) {
+          if (json.data.count === 0) {
+            setTag([]);
+          } else {
+            const max = json.data.rows.sort((a, b) => b.count - a.count)[0]
+              .count;
+            const data: ITagData[] = json.data.rows
+              .filter((value) => value.count < max)
+              .map((item) => {
+                return {
+                  key: item.name,
+                  title: item.name,
+                  count: item.count,
+                };
+              });
+            setTag(data);
+          }
         } else {
-          const max = json.data.rows.sort((a, b) => b.count - a.count)[0].count;
-          const data: ITagData[] = json.data.rows
-            .filter((value) => value.count < max)
-            .map((item) => {
-              return {
-                key: item.name,
-                title: item.name,
-                count: item.count,
-              };
-            });
-          setTag(data);
+          setTag([]);
         }
-      } else {
-        setTag([]);
-      }
-    });
+      })
+      .finally(() => setLoad(false));
   }, [progress, lang, type, tags]);
 
   return (
     <div>
-      {tag.length === 0 ? (
+      {load ? (
+        <Skeleton paragraph={{ rows: 4 }} active />
+      ) : tag.length === 0 ? (
         "无"
       ) : (
         <TagArea