react lazy splitting added + spinner(optional)

package-lock.json

@@ -12448,6 +12448,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loader-spinner": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-2.3.0.tgz",
+      "integrity": "sha512-Nu7RXMyAnvdGoZLH5boXaHbqLkgBEIPO1u75zOZkZNp2V+Dg8RvvlZ05SU3ajtmsFNteFe8BJbFd0samH0tXcw==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "prop-types": "15.6.2"
+      }
+    },
     "react-redux": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "normalize.css": "^8.0.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-loader-spinner": "^2.3.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",

src/router.js

@@ -1,27 +1,38 @@
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import { Switch, Route } from "react-router-dom";
-// import AuthPage from './containers/AuthPage'
 
 import * as routes from './constants/routes'
 
 import Header from "./containers/Header"
 import landingPage from './components/landingPage'
-import signInPage from './components/auth/signInPage'
 import Footer from './components/footer'
-import signUpPage from "./components/auth/signUpPage";
-import notFound from "./components/notFound";
-import homePage from "./components/homePage";
+import Loader from 'react-loader-spinner'
+
+const notFound = lazy(() => import("./components/notFound"));
+const homePage = lazy(() => import("./components/homePage"));
+const signInPage = lazy(() => import("./components/auth/signInPage"));
+const signUpPage = lazy(() => import("./components/auth/signUpPage"));
+
 
 export default () => (
-	<div className="container">
-		<Header />
-		<Switch>
-            <Route path={routes.LANDING} exact component={landingPage} />
-			<Route path={routes.SIGN_IN} exact component={signInPage} />
-            <Route path={routes.SIGN_UP} exact component={signUpPage} />
-            <Route path={routes.HOME} exact component={homePage} />
-            <Route component={notFound} />
-		</Switch>
-        <Footer />
-	</div>
+    <Suspense fallback={
+        <Loader
+            type="Puff"
+            color="#00BFFF"
+            height="100"
+            width="100"
+        />
+    }>
+        <div className="container">
+            <Header />
+            <Switch>
+                <Route path={routes.LANDING} exact component={landingPage} />
+                <Route path={routes.SIGN_IN} exact component={signInPage} />
+                <Route path={routes.SIGN_UP} exact component={signUpPage} />
+                <Route path={routes.HOME} exact component={homePage} />
+                <Route component={notFound} />
+            </Switch>
+            <Footer />
+        </div>
+    </Suspense>
 );