Lazy load components

1 files changed, 12 insertions, 5 deletions

diff --git a/src/App.tsx b/src/App.tsx
index 19ba6a6..56aff08 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 /** @global location */
+import React, { Suspense } from "react";
 import { jsx, Global } from "@emotion/core";
 
 import {
@@ -8,14 +9,16 @@ import {
   Switch
 } from "react-router-dom";
 
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { HashLoader } from "react-spinners";
 
-import LandingPage from "./pages/LandingPage";
-import FormPage from "./pages/FormPage";
-import CallbackPage from "./pages/CallbackPage";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import globalStyles from "./globalStyles";
 
+const LandingPage = React.lazy(() => import("./pages/LandingPage"));
+const FormPage = React.lazy(() => import("./pages/FormPage"));
+const CallbackPage = React.lazy(() => import("./pages/CallbackPage"));
+
 const routes = [
   { path: "/", Component: LandingPage },
   { path: "/form/:id", Component: FormPage},
@@ -36,7 +39,11 @@ function App() {
             >
               <Switch location={location}>
                 {routes.map(({path, Component}) => (
-                  <Route key={path} exact path={path} component={Component}/>
+                  <Route exact key={path} path={path}>
+                    <Suspense fallback={<HashLoader color="white"/>}>
+                      <Component/>
+                    </Suspense>
+                  </Route>
                 ))}
               </Switch>
             </CSSTransition>