feat: add default loading skeleton (#1512)

* feat: add global loading logic

# This is the 1st commit message:

feat: add global loading logic

# This is the commit message #2:

chore: update

# This is the commit message #3:

feat: add Loading Skeleton

# This is the commit message #4:

feat: update

# This is the commit message #5:

chore: update Loading

# This is the commit message #6:

chore: update pnpm-lock.yaml

# This is the commit message #7:

chore: fix lock file

# This is the commit message #8:

Revert "chore: fix lock file"

This reverts commit 73dee02.

# This is the commit message #9:

Revert "chore: update pnpm-lock.yaml"

This reverts commit 3f6f579.

# This is the commit message #10:

chore: fix lock file

# This is the commit message #11:

chore: update logic

# This is the commit message #12:

chore(deps): bump [email protected]

# This is the commit message #13:

Revert "chore(deps): bump [email protected]"

This reverts commit 011ecf9.

# This is the commit message #14:

fix: fix path error on windows platform

# This is the commit message #15:

chore(deps): bump [email protected]

# This is the commit message #16:

chore: revert @umi/lint 4.0.54 => 4.0.53

Because there is breaking change

# This is the commit message #17:

chore(deps): upgrade [email protected]

# This is the commit message #18:

chore: update type

# This is the commit message #19:

chore: update Loading

# This is the commit message #20:

refactor: site template ignore dist dir (#1518)

add /dist > .gitignore
# This is the commit message #21:

refactor: improve content padding when disable footer (#1517)

* chore(theme): improve the default theme style

* chore: update Content style

* chore: update
# This is the commit message #22:

refactor: make chunk name clean for theme routes (#1513)

fix: special links not working bug in markdown (#1524)

* fix: absolute links and schema links lost bug in markdown

* refactor: update relative link condition

* refactor: update relative link condition for data url

* Update src/loaders/markdown/transformer/rehypeLink.ts

* Update src/loaders/markdown/transformer/rehypeLink.ts

* refactor: new way to handle special links

fix: workaround for helmet lost in ssr since [email protected] (#1525)

* fix: helmet lost in ssr since [email protected]

* refactor: patch helmet for version range

* style: update

fix: react types is missing in react template (#1526)

build: release 2.1.15

Revert "Merge branch 'master' into wuxh/feat-1463"

This reverts commit 6b344d9, reversing
changes made to bfef009.

* chore: update

* chore: update lock file

* docs: update dingtalk qrcode

* fix: conventional 2-level nav lost in localized routes (#1951)

* chore: bump @babel/traverse from 7.22.8 to 7.23.2 (#1947)

Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.8 to 7.23.2.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse)

---
updated-dependencies:
- dependency-name: "@babel/traverse"
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build: release 2.2.14

* docs: correct spelling of code sandbox

* fix: unexpected transformation of colon symbol (#1962)

Co-authored-by: liangjun.chen <[email protected]>

* chore: bump browserify-sign from 4.2.1 to 4.2.2 (#1954)

Bumps [browserify-sign](https://github.com/crypto-browserify/browserify-sign) from 4.2.1 to 4.2.2.
- [Changelog](https://github.com/browserify/browserify-sign/blob/main/CHANGELOG.md)
- [Commits](browserify/browserify-sign@v4.2.1...v4.2.2)

---
updated-dependencies:
- dependency-name: browserify-sign
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix: color select disappeared unexpectedly on simulator (#1976)

* fix: wrong search scroll position of 1-level heading in current page (#1978)

* fix: fixed the hash was cleared and did not scroll to the corresponding position

* feat: 调整搜索逻辑，如果目标链接是本页 & !hash，则滚动到顶部

* fix: api table does not respect ignore flag (#1981)

* build: release 2.2.15

* fix: handle unexpected oneof and allof for api metadata (#1982)

* refactor: cache dir config can control compile fs cache location (#1984)

* refactor: use async way to parse theme modules (#1983)

* build: release 2.2.16

* chore: revert change

* Revert "chore: revert change"

This reverts commit 6eeac57.

* chore: remove

* feat: add loadcomp logic

* chore: making the simple complicated is commonplace

* Revert "Revert "chore: revert change""

This reverts commit fee192f.

* chore: ?

* chore: clean code

* chore: update lock file

* chore: update

* chore: update style

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: PeachScript <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Optimistic-Chen <[email protected]>
Co-authored-by: liangjun.chen <[email protected]>
Co-authored-by: binyellow <[email protected]>
Co-authored-by: 阿平 <[email protected]>

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;