Lazy load the AdminRouter

This commit is contained in:
Matthew Penner 2020-08-22 17:25:47 -06:00
parent 434d204c49
commit e5c30cb6f3

View file

@ -1,5 +1,6 @@
import React, { useEffect } from 'react'; // import React, { useEffect } from 'react';
import ReactGA from 'react-ga'; // import ReactGA from 'react-ga';
import React from 'react';
import { hot } from 'react-hot-loader/root'; import { hot } from 'react-hot-loader/root';
import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { StoreProvider } from 'easy-peasy'; import { StoreProvider } from 'easy-peasy';
@ -13,7 +14,8 @@ import ProgressBar from '@/components/elements/ProgressBar';
import NotFound from '@/components/screens/NotFound'; import NotFound from '@/components/screens/NotFound';
import tw from 'twin.macro'; import tw from 'twin.macro';
import GlobalStylesheet from '@/assets/css/GlobalStylesheet'; import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
import AdminRouter from '@/routers/AdminRouter';
const ChunkedAdminRouter = lazy(() => import(/* webpackChunkName: "admin" */'@/routers/AdminRouter'));
interface ExtendedWindow extends Window { interface ExtendedWindow extends Window {
SiteConfiguration?: SiteSettings; SiteConfiguration?: SiteSettings;
@ -50,10 +52,10 @@ const App = () => {
store.getActions().settings.setSettings(SiteConfiguration!); store.getActions().settings.setSettings(SiteConfiguration!);
} }
useEffect(() => { /* useEffect(() => {
ReactGA.initialize(SiteConfiguration!.analytics); ReactGA.initialize(SiteConfiguration!.analytics);
ReactGA.pageview(location.pathname); ReactGA.pageview(location.pathname);
}, []); }, []); */
return ( return (
<> <>
@ -64,13 +66,15 @@ const App = () => {
<div css={tw`mx-auto w-auto`}> <div css={tw`mx-auto w-auto`}>
<BrowserRouter basename={'/'} key={'root-router'}> <BrowserRouter basename={'/'} key={'root-router'}>
<Switch> <Suspense fallback={<div>Loading...</div>}>
<Route path="/server/:id" component={ServerRouter}/> <Switch>
<Route path="/auth" component={AuthenticationRouter}/> <Route path="/server/:id" component={ServerRouter}/>
<Route path="/admin" component={AdminRouter}/> <Route path="/auth" component={AuthenticationRouter}/>
<Route path="/" component={DashboardRouter}/> <Route path="/admin" component={ChunkedAdminRouter}/>
<Route path={'*'} component={NotFound}/> <Route path="/" component={DashboardRouter}/>
</Switch> <Route path={'*'} component={NotFound}/>
</Switch>
</Suspense>
</BrowserRouter> </BrowserRouter>
</div> </div>
</Provider> </Provider>