fix: @loadable/component on sidebar link error

SolidZORO · Jun 21, 2020 · 228608f · 228608f
1 parent 9135248
commit 228608f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 29 deletions.
diff --git a/packages/leaa-dashboard/src/components/Spinner/Spinner.tsx b/packages/leaa-dashboard/src/components/Spinner/Spinner.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import _ from 'lodash';
 // @ts-ignore
 import NProgress from 'nprogress';
-// import { Spin } from 'antd';
 
 export const Spinner = () => {
   React.useEffect(() => {
-    const nStart = _.debounce(NProgress.start, 100);
-    nStart();
+    NProgress.set(0.1);
+    NProgress.start();
 
     return () => {
-      nStart.cancel();
       NProgress.done();
+      NProgress.remove();
     };
   }, []);
 

diff --git a/packages/leaa-dashboard/src/routes/auth.route.tsx b/packages/leaa-dashboard/src/routes/auth.route.tsx
@@ -2,7 +2,7 @@ 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 { lazy } from '@loadable/component';
+import lazy from '@loadable/component';
 
 import { Spinner } from '@leaa/dashboard/src/components';
 import { AuthLayout } from '@leaa/dashboard/src/layouts';
@@ -23,11 +23,7 @@ export const authRoute = authRoutes.map((item: IRouteItem) => (
     {item.LazyComponent && (
       <AuthLayout
         route={item}
-        lazyComponent={(matchProps: IPage) => (
-          <React.Suspense fallback={<Spinner />}>
-            <item.LazyComponent {...matchProps} />
-          </React.Suspense>
-        )}
+        lazyComponent={(matchProps: IPage) => <item.LazyComponent {...matchProps} fallback={<Spinner />} />}
       />
     )}
   </Route>

diff --git a/packages/leaa-dashboard/src/routes/master.route.tsx b/packages/leaa-dashboard/src/routes/master.route.tsx
@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import React, { ReactNode } from 'react';
 import { Route } from 'react-router-dom';
-// import { lazy, LazyBoundary } from 'react-imported-component';
-import { lazy } from '@loadable/component';
+import lazy from '@loadable/component';
 
 import { IRouteItem, IPage } from '@leaa/dashboard/src/interfaces';
 import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
@@ -432,16 +431,10 @@ const parseRoutes = (routeList: IRouteItem[]) => {
 
     routerDom.push(
       <Route key={item.children ? `group-${item.name}` : item.path} exact={item.exact} path={item.path}>
-        {item.LazyComponent && (
-          <MasterLayout
-            route={item}
-            lazyComponent={(matchProps: IPage) => (
-              <React.Suspense fallback={<Spinner />}>
-                <item.LazyComponent {...matchProps} />
-              </React.Suspense>
-            )}
-          />
-        )}
+        <MasterLayout
+          route={item}
+          lazyComponent={(matchProps: IPage) => <item.LazyComponent {...matchProps} fallback={<Spinner />} />}
+        />
       </Route>,
     );
   });

diff --git a/packages/leaa-dashboard/src/routes/other.route.tsx b/packages/leaa-dashboard/src/routes/other.route.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { lazy } from '@loadable/component';
+import lazy from '@loadable/component';
 
 import { IRouteItem, IPage } from '@leaa/dashboard/src/interfaces';
 import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
@@ -35,11 +35,7 @@ export const otherRoute = otherRoutes.map((item: IRouteItem) => (
   <Route key={item.path} exact path={item.path}>
     {item.LazyComponent && (
       <RootLayout
-        lazyComponent={(matchProps: IPage) => (
-          <React.Suspense fallback={<Spinner />}>
-            <item.LazyComponent {...matchProps} />
-          </React.Suspense>
-        )}
+        lazyComponent={(matchProps: IPage) => <item.LazyComponent {...matchProps} fallback={<Spinner />} />}
       />
     )}
   </Route>