add code spliting to MainContainer

This commit is contained in:
Barry Gitarts 2019-02-07 14:24:51 -05:00
parent 448c38b7ee
commit 7b776f87a4

View File

@ -1,5 +1,5 @@
import React from 'react'; import React, { Suspense, lazy } from 'react';
import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom' import { HashRouter as Route, Link, Switch } from 'react-router-dom'
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
@ -19,10 +19,11 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox'; import InboxIcon from '@material-ui/icons/MoveToInbox';
import { ScaleLoader } from 'react-spinners' import { ScaleLoader } from 'react-spinners'
import FundsManagement from './FundsManagement'
import ContractAdmin from './ContractAdmin' const Dashboard = lazy(() => import('./Dashboard'))
import TransferGraph from './TransfersGraph' const TransferGraph = lazy(() => import('./TransfersGraph'))
import Dashboard from './Dashboard' const FundsManagement = lazy(() => import('./FundsManagement'))
const ContractAdmin = lazy(() => import('./ContractAdmin'))
const drawerWidth = 240 const drawerWidth = 240
@ -193,12 +194,14 @@ 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={<div>Loading...</div>}>
<Switch> <Switch>
<Route path="/(|dashboard)" component={Dashboard} /> <Route path="/(|dashboard)" component={Dashboard} />
<Route path="/admin" component={ContractAdmin} /> <Route path="/admin" component={ContractAdmin} />
<Route path="/funds-management" render={() => <FundsManagement open={open} />} /> <Route path="/funds-management" render={() => <FundsManagement open={open} />} />
<Route path="/insights" component={TransferGraph} /> <Route path="/insights" component={TransferGraph} />
</Switch> </Switch>
</Suspense>
{this.props.children} {this.props.children}
</div> </div>
</main> </main>