feat(website):加loading

SunLxy · May 8, 2022 · 9c9b022 · 9c9b022
1 parent cadd79b
commit 9c9b022
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/website/src/components/useMdData/index.ts b/website/src/components/useMdData/index.ts
@@ -11,7 +11,10 @@ const useMdData = (path: (lang: string) => Promise<{ default: CodeBlockData }>,
     languages: {},
   });
   const lang = init.t(name);
+
+  const [loading, setLoading] = useState(false);
   useEffect(() => {
+    setLoading(() => true);
     const getMd = async () => {
       try {
         const result = await path(lang);
@@ -21,10 +24,12 @@ const useMdData = (path: (lang: string) => Promise<{ default: CodeBlockData }>,
       } catch (err) {
         console.warn(err);
       }
+      setLoading(() => false);
     };
     getMd();
-  }, [lang, path]);
-  return mdData;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lang]);
+  return { mdData, loading };
 };
 
 export default useMdData;
diff --git a/website/src/pages/docs/index.tsx b/website/src/pages/docs/index.tsx
@@ -1,8 +1,13 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import useMdData from './../../components/useMdData';
+import { Loader } from 'uiw';
 export function HomePage() {
-  const mdData = useMdData((path) => {
+  const { mdData, loading } = useMdData((path) => {
     return import(`markdown-react-code-preview-loader/README${path}.md`);
   });
-  return <MarkdownPreview source={mdData.source} />;
+  return (
+    <Loader style={{ width: '100%' }} loading={loading} tip="loading...">
+      <MarkdownPreview source={mdData.source} />
+    </Loader>
+  );
 }
diff --git a/website/src/pages/example/index.tsx b/website/src/pages/example/index.tsx
@@ -1,6 +1,8 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import PreView from '../../components/CodeLayout';
 import useMdData from './../../components/useMdData';
+import { Loader } from 'uiw';
+
 const getMetaData = (meta: string) => {
   if (meta) {
     const [metaItem] = /mdx:(.[\w|:]+)/i.exec(meta) || [];
@@ -14,9 +16,9 @@ const getMetaData = (meta: string) => {
 };
 
 export function ExamplePage() {
-  const mdData = useMdData((path) => import(`./App${path}.md`));
+  const { mdData, loading } = useMdData((path) => import(`./App${path}.md`));
   return (
-    <div>
+    <Loader style={{ width: '100%' }} loading={loading} tip="loading...">
       <MarkdownPreview
         source={mdData.source}
         components={{
@@ -50,6 +52,6 @@ export function ExamplePage() {
           },
         }}
       />
-    </div>
+    </Loader>
   );
 }