feat: add a pMinDelay load

SolidZORO · Jun 20, 2020 · 977c2d2 · 977c2d2
1 parent 30e5829
commit 977c2d2
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 45 deletions.
diff --git a/packages/leaa-dashboard/package.json b/packages/leaa-dashboard/package.json
@@ -53,6 +53,7 @@
     "mobx": "^5.15.4",
     "mobx-react": "6.2.2",
     "moment": "2.27.0",
+    "p-min-delay": "^3.1.0",
     "pretty-bytes": "^5.3.0",
     "prop-types": "15.7.2",
     "qs": "6.9.4",

diff --git a/packages/leaa-dashboard/src/components/SuspenseFallback/style.module.less b/packages/leaa-dashboard/src/components/SuspenseFallback/style.module.less
@@ -2,14 +2,16 @@
 
 .suspense-fallback-loader {
   z-index: 99999;
-  position: absolute;
-  top: @page-card-padding-x;
-  //right: @page-card-padding-x + 5;
-  left: @page-card-padding-x + 5;
   opacity: 0.5;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  margin-top: 113px;
+
   span {
     margin-top: 0 !important;
-    font-size: 120% !important;
+    font-size: 180% !important;
   }
 }
diff --git a/packages/leaa-dashboard/src/constants/route.constant.ts b/packages/leaa-dashboard/src/constants/route.constant.ts
@@ -1 +1,2 @@
 export const ALLOW_PERMISSION = '__ALLOW_PERMISSION__';
+export const LOADABLE_DELAY = 20;
diff --git a/.../leaa-dashboard/src/pages/TestWithoutLayout/TestAnyWithoutLayout/TestAnyWithoutLayout.tsx b/.../leaa-dashboard/src/pages/TestWithoutLayout/TestAnyWithoutLayout/TestAnyWithoutLayout.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { IPage } from '@leaa/dashboard/src/interfaces';
 // import { MessageOutlined, createFromIconfontCN } from '@ant-design/icons';
 // import { DatePickerUpdateTest as Test } from './_components/DatePickerUpdateTest/DatePickerUpdateTest';
+import { SuspenseFallback } from '@leaa/dashboard/src/components';
 import { CrudRequestTest as Test } from './_components/CrudRequestTest/CrudRequestTest';
 
 // http://192.168.169.99:7777/test-any-without-layout
 export default (props: IPage) => {
   return (
     <div style={{ padding: 10 }}>
       <Test />
+      <SuspenseFallback />
 
       <hr />
     </div>

diff --git a/packages/leaa-dashboard/src/routes/auth.route.tsx b/packages/leaa-dashboard/src/routes/auth.route.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { IRouteItem, IPage } from '@leaa/dashboard/src/interfaces';
-import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
+import { ALLOW_PERMISSION, LOADABLE_DELAY } from '@leaa/dashboard/src/constants';
 import loadable from '@loadable/component';
+import pMinDelay from 'p-min-delay';
 
 import { AuthLayout, SuspenseFallback } from '@leaa/dashboard/src/components';
 
@@ -12,7 +13,9 @@ export const authRoutes: IRouteItem[] = [
     namei18n: '_route:login',
     permission: ALLOW_PERMISSION,
     path: '/login',
-    LazyComponent: loadable(() => import(/* webpackChunkName: 'Login' */ '../pages/Auth/Login/Login')),
+    LazyComponent: loadable(() =>
+      pMinDelay(import(/* webpackChunkName: 'Login' */ '../pages/Auth/Login/Login'), LOADABLE_DELAY),
+    ),
     exact: true,
   },
 ];