From fb44ecd57f4e764d50f85c346f5b05c6fcf291de Mon Sep 17 00:00:00 2001
From: KuangPF <1633397286@qq.com>
Date: Sun, 16 Jul 2023 16:34:10 +0800
Subject: [PATCH] feat(config): add loading config

---
 example/.dumirc.ts           |  3 +++
 package.json                 |  3 +++
 src/common/Loading/index.tsx | 43 ++++++++++++++++++++++++++++++++++++
 src/hooks/useMenu.tsx        |  4 +---
 src/types.ts                 |  7 +++++-
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/common/Loading/index.tsx

diff --git a/example/.dumirc.ts b/example/.dumirc.ts
index 5e844ae..882294f 100644
--- a/example/.dumirc.ts
+++ b/example/.dumirc.ts
@@ -97,6 +97,9 @@ export default defineConfig({
         }
       ]
     },
+    loading: {
+      skeleton: ['/guide', '/config']
+    },
     docVersions: {
       [pkgJSON.version]: ''
     },
diff --git a/package.json b/package.json
index 0a6e659..044a171 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,9 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    "./loading": "./dist/common/Loading/index.js"
+  },
   "scripts": {
     "build": "father build",
     "build:docs": "cross-env APP_ROOT=example dumi build",
diff --git a/src/common/Loading/index.tsx b/src/common/Loading/index.tsx
new file mode 100644
index 0000000..c87cb92
--- /dev/null
+++ b/src/common/Loading/index.tsx
@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { Skeleton, Space, Spin } from 'antd';
+import { useLocation } from 'dumi';
+import type { IAllThemeConfig } from '../../types';
+import useAdditionalThemeConfig from '../../hooks/useAdditionalThemeConfig';
+
+const defaultLoadingConfig: IAllThemeConfig['loading'] = {
+  skeleton: []
+};
+
+const Loading: React.FC = () => {
+  const { pathname } = useLocation();
+  const { loading = defaultLoadingConfig } = useAdditionalThemeConfig();
+
+  const skeletonLoadingRenderRule = useCallback(() => {
+    const pathnameReg = loading.skeleton;
+    if (pathnameReg) {
+      return (
+        pathnameReg.filter((rule) => {
+          return pathname.startsWith(rule);
+        }).length > 0
+      );
+    }
+    return false;
+  }, [loading, pathname]);
+
+  if (skeletonLoadingRenderRule()) {
+    return (
+      <Space direction="vertical" style={{ width: '100%', marginTop: 24 }} size={40}>
+        <Skeleton title={false} active paragraph={{ rows: 3 }} />
+        <Skeleton active paragraph={{ rows: 3 }} />
+      </Space>
+    );
+  }
+
+  return (
+    <Space style={{ width: '100%', margin: '120px 0', justifyContent: 'center' }} align="center">
+      <Spin size="large" />
+    </Space>
+  );
+};
+
+export default Loading;
diff --git a/src/hooks/useMenu.tsx b/src/hooks/useMenu.tsx
index c5b72af..7a4792c 100644
--- a/src/hooks/useMenu.tsx
+++ b/src/hooks/useMenu.tsx
@@ -111,9 +111,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               sidebarGroupModePath === true
                 ? true
                 : (sidebarGroupModePath ?? []).filter((rule: ISidebarGroupModePathItem) => {
-                    return typeof rule === 'string'
-                      ? pathname.startsWith(rule)
-                      : rule.test(pathname);
+                    return pathname.startsWith(rule);
                   }).length > 0;
 
             if (isSideBarGroupMode) {
diff --git a/src/types.ts b/src/types.ts
index ac22177..f58f891 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type IThemeConfig } from 'dumi/dist/client/theme-api/types';
 import { type ThemeConfig } from 'antd';
 
-export type ISidebarGroupModePathItem = string | RegExp;
+export type ISidebarGroupModePathItem = string;
 
 interface ILocaleEnhance {
   /** 同 themeConfig 中 locales 项中的 id */
@@ -36,6 +36,9 @@ interface IFeature {
   itemCss?: SerializedStyles;
 }
 
+interface ILoading {
+  skeleton?: Array<string>;
+}
 // 分组类型，将 children 换位字符串数组
 
 export type SidebarEnhanceItemType = {
@@ -105,6 +108,8 @@ interface IAdditionalThemeConfig {
   sidebarEnhance?: Record<string, SidebarEnhanceItems>;
   /** antd 主题定制，同 `ConfigProvider` 中 `theme` */
   theme?: Omit<ThemeConfig, 'algorithm'>;
+  /** 是否展示页面加载状态 */
+  loading?: ILoading;
 }
 
 export interface IAllThemeConfig extends Omit<IThemeConfig, 'socialLinks'>, IAdditionalThemeConfig {