From 259b9bb0eb5e35f902413fe4c6c4175b46e50005 Mon Sep 17 00:00:00 2001
From: Joe Banks <joseph@josephbanks.me>
Date: Mon, 12 Oct 2020 13:36:01 +0100
Subject: Lazy load components

---
 src/App.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'src/App.tsx')

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>
-- 
cgit v1.2.3