From a365ec548a5a1ef9ae6aa458cadf2eefd9f610a0 Mon Sep 17 00:00:00 2001
From: Antoine Chalifour <antoine.chalifour@gmail.com>
Date: Sat, 5 Oct 2019 20:13:36 +0200
Subject: [PATCH] feat: use React.lazy for loading components (#158)

---
 src/router.tsx               | 11 +++++------
 src/utils/asyncComponent.tsx | 34 ----------------------------------
 2 files changed, 5 insertions(+), 40 deletions(-)
 delete mode 100644 src/utils/asyncComponent.tsx

diff --git a/src/router.tsx b/src/router.tsx
index 889e2bd..b007523 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -5,16 +5,15 @@ import { Router, Route, Switch } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { AppContextConsumer, AppStateInterface } from './App/App';
 
-import { asyncComponent } from './utils/asyncComponent';
 import Header from './components/Header';
 
 const history = createBrowserHistory({
   basename: window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix,
 });
 
-const NotFound = asyncComponent(() => import('./components/NotFound'));
-const VersionPackage = asyncComponent(() => import('./pages/Version'));
-const HomePage = asyncComponent(() => import('./pages/home'));
+const NotFound = React.lazy(() => import('./components/NotFound'));
+const VersionPackage = React.lazy(() => import('./pages/Version'));
+const HomePage = React.lazy(() => import('./pages/home'));
 
 interface RouterAppProps {
   onLogout: () => void;
@@ -25,7 +24,7 @@ class RouterApp extends Component<RouterAppProps> {
   public render(): ReactElement<HTMLDivElement> {
     return (
       <Router history={history}>
-        <>
+        <React.Suspense fallback={null}>
           {this.renderHeader()}
           <Switch>
             <Route exact={true} path={'/'} render={this.renderHomePage} />
@@ -35,7 +34,7 @@ class RouterApp extends Component<RouterAppProps> {
             <Route exact={true} path={'/-/web/detail/@:scope/:package/v/:version'} render={this.renderVersionPage} />
             <Route component={NotFound} />
           </Switch>
-        </>
+        </React.Suspense>
       </Router>
     );
   }
diff --git a/src/utils/asyncComponent.tsx b/src/utils/asyncComponent.tsx
deleted file mode 100644
index 9789aa0..0000000
--- a/src/utils/asyncComponent.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { ComponentClass } from 'react';
-
-export function asyncComponent(getComponent): ComponentClass {
-  return class AsyncComponent extends React.Component {
-    public static Component = null;
-    public state = { Component: AsyncComponent.Component };
-
-    public componentDidMount(): void {
-      const { Component } = this.state;
-      if (!Component) {
-        getComponent()
-          .then(({ default: Component }) => {
-            AsyncComponent.Component = Component;
-            /* eslint react/no-did-mount-set-state:0 */
-            this.setState({ Component });
-          })
-          .catch(err => {
-            console.error(err);
-          });
-      }
-    }
-
-    public render(): JSX.Element | null {
-      const { Component } = this.state;
-      if (Component) {
-        // eslint-disable-next-line verdaccio/jsx-spread
-        // @ts-ignore
-        return <Component {...this.props} />;
-      }
-
-      return null;
-    }
-  };
-}