Merge pull request asapzacy#36 from asapzacy/fix/react-lazy-flash

Fix FOUC when switching routes

Author: asapzacy

src/components/Global/Global.js src/components/Global/GlobalStyles.jssrc/components/Global/Global.js renamed to src/components/Global/GlobalStyles.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Global as GlobalStyles, css } from '@emotion/core'
+import { Global, css } from '@emotion/core'
 
-const Global = () => (
-  <GlobalStyles
+const GlobalStyles = () => (
+  <Global
     styles={theme => css`
       * {
         margin: 0;
@@ -78,4 +78,4 @@ const Global = () => (
   />
 )
 
-export default Global
+export default GlobalStyles

src/components/index.js

@@ -1,5 +1,5 @@
 /* -------  base components  ------- */
-import Global from './Global/Global'
+import GlobalStyles from './Global/GlobalStyles'
 import Header from './Header/Header'
 import Footer from './Footer/Footer'
 import Social from './Social/Social'
@@ -35,7 +35,7 @@ import Diamond from './Diamond/Diamond'
 import UpdateTime from './UpdateTime/UpdateTime'
 
 export {
-  Global,
+  GlobalStyles,
   Header,
   Footer,
   Social,

src/config/Routes.js

@@ -29,24 +29,26 @@ const TestContainer = React.lazy(() =>
 )
 
 const Routes = () => (
-  <Switch>
-    <Route exact={true} path={'/'} component={HomeContainer} />
-    <Route exact={true} path={'/mlb'} component={MlbContainer} />
-    <Route exact={true} path={'/mlb/scores'} component={MlbContainer} />
-    <Route path={'/mlb/scores/:date'} component={MlbContainer} />
-    <Route exact={true} path={'/nba'} component={NbaContainer} />
-    <Route exact={true} path={'/nba/scores'} component={NbaContainer} />
-    <Route path={'/nba/scores/:date'} component={NbaContainer} />
-    <Route exact={true} path={'/nfl'} component={NflContainer} />
-    <Route exact={true} path={'/nfl/scores'} component={NflContainer} />
-    <Route path={'/nfl/scores/:week'} component={NflContainer} />
-    <Route exact={true} path={'/nhl'} component={NhlContainer} />
-    <Route exact={true} path={'/nhl/scores'} component={NhlContainer} />
-    <Route path={'/nhl/scores/:date'} component={NhlContainer} />
-    <Route path={'/about'} component={AboutContainer} />
-    {__DEV__ && <Route path={'/test'} component={TestContainer} />}
-    <Route path={'*'} component={NotFoundContainer} />
-  </Switch>
+  <React.Suspense fallback={null}>
+    <Switch>
+      <Route exact={true} path={'/'} component={HomeContainer} />
+      <Route exact={true} path={'/mlb'} component={MlbContainer} />
+      <Route exact={true} path={'/mlb/scores'} component={MlbContainer} />
+      <Route path={'/mlb/scores/:date'} component={MlbContainer} />
+      <Route exact={true} path={'/nba'} component={NbaContainer} />
+      <Route exact={true} path={'/nba/scores'} component={NbaContainer} />
+      <Route path={'/nba/scores/:date'} component={NbaContainer} />
+      <Route exact={true} path={'/nfl'} component={NflContainer} />
+      <Route exact={true} path={'/nfl/scores'} component={NflContainer} />
+      <Route path={'/nfl/scores/:week'} component={NflContainer} />
+      <Route exact={true} path={'/nhl'} component={NhlContainer} />
+      <Route exact={true} path={'/nhl/scores'} component={NhlContainer} />
+      <Route path={'/nhl/scores/:date'} component={NhlContainer} />
+      <Route path={'/about'} component={AboutContainer} />
+      {__DEV__ && <Route path={'/test'} component={TestContainer} />}
+      <Route path={'*'} component={NotFoundContainer} />
+    </Switch>
+  </React.Suspense>
 )
 
 export default Routes

src/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { AppContainer } from 'react-hot-loader'
+import { AppContainer as ReactHotLoader } from 'react-hot-loader'
 import { ThemeProvider } from 'emotion-theming'
 import ReactGA from 'react-ga'
 import * as Sentry from '@sentry/browser'
 
 import { MainContainer as Root } from 'containers'
-import { Global } from 'components'
+import { GlobalStyles } from 'components'
 import theme from './theme'
 
 require('dotenv').config()
@@ -22,14 +22,12 @@ if (process.env.NODE_ENV === 'production') {
 const renderApp = Root => {
   render(
     <ThemeProvider theme={theme}>
-      <Global />
-      <AppContainer>
+      <GlobalStyles />
+      <ReactHotLoader>
         <Router>
-          <React.Suspense fallback={<div />}>
-            <Root />
-          </React.Suspense>
+          <Root />
         </Router>
-      </AppContainer>
+      </ReactHotLoader>
     </ThemeProvider>,
     document.getElementById('root')
   )