add LoadingComponent

package.json

@@ -30,8 +30,7 @@
     "react-dom": "^15.6.1",
     "react-draft-wysiwyg": "^1.10.0",
     "react-helmet": "^5.1.3",
-    "recharts": "^0.22.4",
-    "roadhog": "^1.2.1"
+    "recharts": "^0.22.4"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",

src/components/Loader/Loader.js

@@ -3,8 +3,11 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'
 
-const Loader = ({ spinning }) => {
-  return (<div className={classNames(styles.loader, { [styles.hidden]: !spinning })}>
+const Loader = ({ spinning, fullScreen }) => {
+  return (<div className={classNames(styles.loader, {
+    [styles.hidden]: !spinning,
+    [styles.loader_fullScreen]: fullScreen,
+  })}>
     <div className={styles.warpper}>
       <div className={styles.inner} />
       <div className={styles.text} >LOADING</div>
@@ -15,6 +18,7 @@ const Loader = ({ spinning }) => {
 
 Loader.propTypes = {
   spinning: PropTypes.bool,
+  fullScreen: PropTypes.bool,
 }
 
 export default Loader

src/components/Loader/Loader.less

@@ -1,8 +1,12 @@
+.loader_fullScreen {
+  position: fixed !important;
+}
+
 .loader {
   display: block;
   background-color: #fff;
   width: 100%;
-  position: fixed;
+  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;

src/router.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Router, Switch, Route, Redirect, routerRedux } from 'dva/router'
 import dynamic from 'dva/dynamic'
 import App from 'routes/app'
+import { Loader } from 'components'
 
 const { ConnectedRouter } = routerRedux
 
@@ -72,7 +73,11 @@ const Routers = function ({ history, app }) {
           <Route exact path='/' render={() => (<Redirect to='/dashboard' />)} />
           {
             routes.map(({ path, ...dynamics }, key) => (
-              <Route key={key} exact path={path} component={dynamic({ app, ...dynamics })} />
+              <Route key={key} exact path={path} component={dynamic({
+                app,
+                LoadingComponent: ({ productId }) => (<Loader spinning />),
+                ...dynamics
+              })} />
             ))
           }
           <Route component={error} />

src/routes/app.js

@@ -41,16 +41,16 @@ const App = ({ children, dispatch, app, loading, location }) => {
     isNavbar,
     menuPopoverVisible,
     navOpenKeys,
-    switchMenuPopover () {
+    switchMenuPopover() {
       dispatch({ type: 'app/switchMenuPopver' })
     },
-    logout () {
+    logout() {
       dispatch({ type: 'app/logout' })
     },
-    switchSider () {
+    switchSider() {
       dispatch({ type: 'app/switchSider' })
     },
-    changeOpenKeys (openKeys) {
+    changeOpenKeys(openKeys) {
       dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     },
   }
@@ -61,10 +61,10 @@ const App = ({ children, dispatch, app, loading, location }) => {
     siderFold,
     darkTheme,
     navOpenKeys,
-    changeTheme () {
+    changeTheme() {
       dispatch({ type: 'app/switchTheme' })
     },
-    changeOpenKeys (openKeys) {
+    changeOpenKeys(openKeys) {
       window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
       dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     },
@@ -76,13 +76,13 @@ const App = ({ children, dispatch, app, loading, location }) => {
   }
   if (openPages && openPages.includes(pathname)) {
     return (<div>
-      <Loader spinning={loading.effects['app/query']} />
+      <Loader fullScreen spinning={loading.effects['app/query']} />
       {children}
     </div>)
   }
   return (
     <div>
-      <Loader spinning={loading.effects['app/query']} />
+      <Loader fullScreen spinning={loading.effects['app/query']} />
       <Helmet>
         <title>ANTD ADMIN</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />