From 2e8c6c16e0403efd524e5e52110c1ec91d6c471b Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Mon, 19 Nov 2018 18:00:09 +0100
Subject: [PATCH] refactor(App.js) code splitting with `react-loadable`

---
 src/App.js | 49 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index bde3499..9744ed1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,50 @@
 import React, { Component } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+// import { renderRoutes } from 'react-router-config';
+import Loadable from 'react-loadable';
 import './App.scss';
 
-// Containers
-import { DefaultLayout } from './containers';
-// Pages
-import { Login, Page404, Page500, Register } from './views/Pages';
+const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
 
-// import { renderRoutes } from 'react-router-config';
+// Containers
+const DefaultLayout = Loadable({
+  loader: () => import('./containers/DefaultLayout'),
+  loading
+});
+
+// Pages
+const Login = Loadable({
+  loader: () => import('./views/Pages/Login'),
+  loading
+});
+
+const Register = Loadable({
+  loader: () => import('./views/Pages/Register'),
+  loading
+});
+
+const Page404 = Loadable({
+  loader: () => import('./views/Pages/Page404'),
+  loading
+});
+
+const Page500 = Loadable({
+  loader: () => import('./views/Pages/Page500'),
+  loading
+});
 
 class App extends Component {
+
   render() {
     return (
       <HashRouter>
-        <Switch>
-          <Route exact path="/login" name="Login Page" component={Login} />
-          <Route exact path="/register" name="Register Page" component={Register} />
-          <Route exact path="/404" name="Page 404" component={Page404} />
-          <Route exact path="/500" name="Page 500" component={Page500} />
-          <Route path="/" name="Home" component={DefaultLayout} />
-        </Switch>
+          <Switch>
+            <Route exact path="/login" name="Login Page" component={Login} />
+            <Route exact path="/register" name="Register Page" component={Register} />
+            <Route exact path="/404" name="Page 404" component={Page404} />
+            <Route exact path="/500" name="Page 500" component={Page500} />
+            <Route path="/" name="Home" component={DefaultLayout} />
+          </Switch>
       </HashRouter>
     );
   }