feat: dashboard header top add nprogress Loading

packages/leaa-dashboard/package.json

@@ -53,6 +53,7 @@
     "mobx": "^5.15.4",
     "mobx-react": "6.2.2",
     "moment": "2.27.0",
+    "nprogress": "^0.2.0",
     "p-min-delay": "^3.1.0",
     "pretty-bytes": "^5.3.0",
     "prop-types": "15.7.2",

packages/leaa-dashboard/src/App.tsx

@@ -12,6 +12,7 @@ import { history } from '@leaa/dashboard/src/libs';
 import { ErrorBoundary } from '@leaa/dashboard/src/components/ErrorBoundary/ErrorBoundary';
 import { RefreshflatPermissions } from '@leaa/dashboard/src/components/RefreshflatPermissions/RefreshflatPermissions';
 import { RefreshSetting } from '@leaa/dashboard/src/components/RefreshSetting/RefreshSetting';
+import { ProgressLoading } from '@leaa/dashboard/src/components/ProgressLoading/ProgressLoading';
 
 import { masterRoute, authRoute, otherRoute } from '@leaa/dashboard/src/routes';
 import { initStore, StoreProvider } from '@leaa/dashboard/src/stores';

packages/leaa-dashboard/src/components/Spinner/Spinner.tsx

@@ -1,6 +1,20 @@
 import React from 'react';
-import { Spin } from 'antd';
+import _ from 'lodash';
+// @ts-ignore
+import NProgress from 'nprogress';
+// import { Spin } from 'antd';
 
-import style from './style.module.less';
+export const Spinner = () => {
+  React.useEffect(() => {
+    const nStart = _.debounce(NProgress.start, 100);
+    nStart();
 
-export const Spinner = () => <Spin className={style['suspense-fallback-loader']} />;
+    return () => {
+      nStart.cancel();
+      NProgress.done();
+    };
+  }, []);
+
+  return null;
+  // return <Spin className={style['suspense-fallback-loader']} />;
+};

packages/leaa-dashboard/src/components/index.tsx

@@ -1,4 +1,5 @@
 export { Rcon } from './Rcon/Rcon';
+export { Spinner } from './Spinner/Spinner';
 export { HtmlMeta } from './HtmlMeta/HtmlMeta';
 export { BuildInfo } from './BuildInfo/BuildInfo';
 export { SubmitBar } from './SubmitBar/SubmitBar';
@@ -17,7 +18,6 @@ export { EntryInfoDate } from './EntryInfoDate/EntryInfoDate';
 export { AttachmentBox } from './AttachmentBox/AttachmentBox';
 export { RefreshSetting } from './RefreshSetting/RefreshSetting';
 export { SwitchLanguage } from './SwitchLanguage/SwitchLanguage';
-export { Spinner } from './Spinner/Spinner';
 export { AuthGithubButton } from './AuthGithubButton/AuthGithubButton';
 export { ConfirmDeleteButton } from './ConfirmDeleteButton/ConfirmDeleteButton';
 export { SelectCategoryIdByTree } from './SelectCategoryIdByTree/SelectCategoryIdByTree';

packages/leaa-dashboard/src/styles/global.less

@@ -1,4 +1,5 @@
 @import './variables.less';
+@import './nprogress.less';
 
 body {
   &:after {

packages/leaa-dashboard/src/styles/nprogress.less

@@ -0,0 +1,71 @@
+@import './variables.less';
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+  position: fixed;
+  z-index: 10001;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  opacity: 0.9;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 15px @primary-color;
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+#nprogress .spinner {
+  display: none;
+  //display: block;
+  position: fixed;
+  z-index: 10001;
+  top: 3px;
+  right: 3px;
+}
+
+#nprogress .spinner-icon {
+  @w: 17px;
+
+  width: @w;
+  height: @w;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: @primary-color;
+  border-left-color: @primary-color;
+  border-radius: 50%;
+  animation: nprogress-spinner 600ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

yarn.lock

@@ -12349,6 +12349,11 @@ npmlog@^4.0.2, npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npm.taobao.org/nprogress/download/nprogress-0.2.0.tgz?cache=0&sync_timestamp=1587262530340&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnprogress%2Fdownload%2Fnprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/nth-check/download/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"