feat(config): add loading config

example/.dumirc.ts

@@ -97,6 +97,9 @@ export default defineConfig({
         }
       ]
     },
+    loading: {
+      skeleton: ['/guide', '/config']
+    },
     docVersions: {
       [pkgJSON.version]: ''
     },

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",

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;

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) {

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 {