move routes to lazy imports

This commit is contained in:
Barry Gitarts 2019-08-23 15:46:09 -04:00 committed by Barry G
parent 51e3a5ec77
commit 9c062b82e1
1 changed files with 31 additions and 27 deletions

View File

@ -1,4 +1,4 @@
import React from 'react'; import React,{ Suspense, lazy } from 'react';
import { Route, Link, Switch, withRouter } from 'react-router-dom' import { Route, Link, Switch, withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
@ -22,18 +22,20 @@ import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox'; import InboxIcon from '@material-ui/icons/MoveToInbox';
import ProjectIcon from '@material-ui/icons/Work'; import ProjectIcon from '@material-ui/icons/Work';
import { ScaleLoader } from 'react-spinners' import { ScaleLoader } from 'react-spinners'
import FundsManagement from './FundsManagement' import Loading from '../components/base/Loading'
import ContractAdmin from './ContractAdmin'
import TransferGraph from './TransfersGraph' const ListProjects = lazy(() => import('./projects/ListProjects'))
import Dashboard from './Dashboard' const FundsManagement = lazy(() => import('./FundsManagement'))
import Projects from './projects/Projects' const ContractAdmin = lazy(() => import('./ContractAdmin'))
import Project from './projects/Project' const Dashboard = lazy(() => import('./Dashboard'))
import FundProject from './projects/FundProject' const Projects = lazy(() => import('./projects/Projects'))
import BackProject from './projects/BackProject' const Project = lazy(() => import('./projects/Project'))
import ProjectPledges from './projects/ProjectPledges' const FundProject = lazy(() => import('./projects/FundProject'))
import CreateProject from './projects/CreateProject' const BackProject = lazy(() => import('./projects/BackProject'))
import CreateDelegate from './projects/CreateDelegate' const ProjectPledges = lazy(() => import('./projects/ProjectPledges'))
import ListProjects from './projects/ListProjects' const CreateProject = lazy(() => import('./projects/CreateProject'))
const CreateDelegate = lazy(() => import('./projects/CreateDelegate'))
const TransferGraph = lazy(() => import('./TransfersGraph'))
const drawerWidth = 240 const drawerWidth = 240
const formatAccount = account => { const formatAccount = account => {
@ -228,6 +230,7 @@ class PersistentDrawerLeft extends React.Component {
> >
<div className={classes.drawerHeader} /> <div className={classes.drawerHeader} />
<div className={classNames(classes.appBar)}> <div className={classNames(classes.appBar)}>
<Suspense fallback={<Loading />}>
<Switch> <Switch>
<Route path="/(|list-projects)" component={ListProjects} /> <Route path="/(|list-projects)" component={ListProjects} />
<Route path="/dashboard" component={Dashboard} /> <Route path="/dashboard" component={Dashboard} />
@ -242,6 +245,7 @@ class PersistentDrawerLeft extends React.Component {
<Route path="/(back-delegate|back-project)/:id" component={BackProject} /> <Route path="/(back-delegate|back-project)/:id" component={BackProject} />
<Route path="/project-pledges/:id" component={ProjectPledges} /> <Route path="/project-pledges/:id" component={ProjectPledges} />
</Switch> </Switch>
</Suspense>
{this.props.children} {this.props.children}
</div> </div>
</main> </main>