react lazy splitting + spinner component(optional)

src/components/auth/signUpPage/form/index.js

@@ -5,7 +5,6 @@ import formInput from './../../../common/formInput'
 import { Link } from 'react-router-dom'
 import * as routes from './../../../../constants/routes'
 
-
 class Form extends React.Component {
 
     handleSubmit = (event) => {
@@ -19,6 +18,7 @@ class Form extends React.Component {
 
         return (
             <form className="sign-form" onSubmit={this.handleSubmit} method="POST">
+
                 <h2 className="sign-form__header">Sign Up</h2>
 
                 <Field name="login" className="sign-form__input sign-form__input--text" placeholder="Login" component={formInput} type="text" />

src/components/common/spinner/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loader from 'react-loader-spinner'
+
+export default props => (
+    // add props optionally
+
+    <div className="spinner">
+        <Loader
+            type="ThreeDots"
+            color="lightgrey"
+            height="100"
+            width="100"
+        />
+    </div>
+)

src/router.js

@@ -6,33 +6,28 @@ import * as routes from './constants/routes'
 import Header from "./containers/Header"
 import landingPage from './components/landingPage'
 import Footer from './components/footer'
-import Loader from 'react-loader-spinner'
 
-const notFound = lazy(() => import("./components/notFound"));
-const homePage = lazy(() => import("./components/homePage"));
+import spinner from "./components/common/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 () => (
-    <Suspense fallback={
-        <Loader
-            type="Puff"
-            color="#00BFFF"
-            height="100"
-            width="100"
-        />
-    }>
-        <div className="container">
-            <Header />
+    <div className="app">
+        <Header />
+        <Suspense fallback={<spinner />}>
             <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} />
+                {/* Test spinner component <Route path="/spinner" exact component={spinner} /> */}
                 <Route component={notFound} />
             </Switch>
-            <Footer />
-        </div>
-    </Suspense>
+        </Suspense>
+        <Footer />
+    </div>
 );

src/styles/abstracts/_variables.scss

@@ -15,7 +15,4 @@ $color-lightsteelblue: #B0C4DE;
 $color-lightsteelblue-transparent: rgba(176, 196, 222, .9);
 
 $padding-top-fixed: 170px;
-$padding-bottom-fixed: 45px;
-
-
-
+$padding-bottom-fixed: 45px;

src/styles/components/_spinner.scss

@@ -0,0 +1,7 @@
+.spinner {
+    height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/styles/index.scss

@@ -5,8 +5,9 @@
 
 @import "components/button";
 @import "components/header";
-@import "components/signPage";
-@import "components/footer";
+@import "components/spinner";
 @import "components/landingPage";
+@import "components/footer";
+@import "components/signPage";
 @import "components/notFound";