feat: add default loading skeleton

package.json

@@ -122,6 +122,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^4.0.10",
     "react-intl": "^6.4.4",
+    "react-loading-skeleton": "^3.1.1",
     "react-simple-code-editor": "^0.13.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",

src/client/pages/Loading.ts

@@ -0,0 +1,2 @@
+// allow customize loading via theme slots or ./dumi/loading.tsx
+export { default } from 'dumi/theme/slots/Loading';

src/client/theme-default/slots/Loading/index.less

@@ -0,0 +1,20 @@
+@import (reference) '../../styles/variables.less';
+
+@skeleton-cls: react-loading-skeleton;
+
+.@{prefix}-loading-skeleton {
+  .@{skeleton-cls} {
+    margin-block-end: 0.38em;
+
+    &.first-line {
+      width: calc(100% - 2em);
+      margin-inline-start: 2em;
+    }
+
+    // ======== dark mode ========
+    @{dark-selector} & {
+      --highlight-color: fade(@c-text-dark, @dark-light-amount);
+      --base-color: @c-text;
+    }
+  }
+}

src/client/theme-default/slots/Loading/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import './index.less';
+
+const Loading: React.FC = () => (
+  <div className="dumi-default-loading-skeleton">
+    <Skeleton className="first-line" count={1} />
+    <Skeleton count={2} />
+    <Skeleton count={1} width="75%" />
+  </div>
+);
+
+export default Loading;

src/features/theme/index.ts

@@ -17,6 +17,9 @@ import { safeExcludeInMFSU } from '../derivative';
 import loadTheme, { IThemeLoadResult } from './loader';
 
 const DEFAULT_THEME_PATH = path.join(__dirname, '../../../theme-default');
+const DEFAULT_LOADING_PATH = winPath(
+  path.resolve(__dirname, '../../client/pages/Loading'),
+);
 
 /**
  * get pkg theme name
@@ -273,7 +276,7 @@ export default (api: IApi) => {
     // execute before umi tmpFiles plugin
     stage: -Infinity,
     fn() {
-      const { globalLoading } = api.appData;
+      const { globalLoading = DEFAULT_LOADING_PATH } = api.appData;
       const enableNProgress = !!api.config.themeConfig.nprogress;
 
       // replace original loading component data
@@ -291,12 +294,8 @@ export default (api: IApi) => {
               )}';
 import './nprogress.css';`
             : ''
-        }${
-          globalLoading
-            ? `
-import UserLoading from '${globalLoading}';`
-            : ''
         }
+import UserLoading from '${globalLoading}';
 import React, { useLayoutEffect, type FC } from 'react';
 import { useSiteData } from 'dumi';
 
@@ -321,7 +320,7 @@ const DumiLoading: FC = () => {
     }
   }, []);
 
-  return ${globalLoading ? '<UserLoading />' : 'null'};
+  return <UserLoading />
 }
 
 export default DumiLoading;