fix(react-imported-component: use new suspense style API

patrickleet · Jan 23, 2020 · 6a6d0cb · 6a6d0cb
1 parent f3db062
commit 6a6d0cb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/app/App.jsx b/app/App.jsx
@@ -1,18 +1,18 @@
 import React from 'react'
 import { Switch, Route, Redirect } from 'react-router-dom'
-import importComponent from 'react-imported-component'
+import { lazy, LazyBoundary } from 'react-imported-component'
 import { GlobalStyles } from './styles'
 import Header from './components/Header'
 import Home from './pages/Home'
 import LoadingComponent from './pages/Loading'
-import ErrorComponent from './pages/Error'
 
-const About = importComponent(() => import('./pages/About'), {
-  LoadingComponent,
-  ErrorComponent
-})
+const About = lazy(() => import('./pages/About'))
 
-export const renderAboutPage = () => <About />
+export const renderAboutPage = () => (
+  <LazyBoundary fallback={<LoadingComponent />}>
+    <About />
+  </LazyBoundary>
+)
 
 const App = () => (
   <React.Fragment>

diff --git a/app/client.js b/app/client.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom'
 import { HelmetProvider } from 'react-helmet-async'
 import { BrowserRouter } from 'react-router-dom'
 import { rehydrateMarks } from 'react-imported-component'
-import importedComponents from './imported' // eslint-disable-line
 import App from './App'
 
 export const hydrate = (app, element) => () => {