From 4c16a971a23a93d7dbe3913aedece930b037e693 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Thu, 11 Mar 2021 11:30:36 +1100
Subject: [PATCH] Lazy load pages

---
 crabfit-frontend/src/App.tsx                  | 23 ++++++++++------
 .../src/components/Loading/Loading.tsx        | 12 +++++++++
 .../src/components/Loading/loadingStyle.ts    | 26 +++++++++++++++++++
 crabfit-frontend/src/components/index.ts      |  1 +
 4 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 crabfit-frontend/src/components/Loading/Loading.tsx
 create mode 100644 crabfit-frontend/src/components/Loading/loadingStyle.ts

diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx
index 74cdd38..e7fd787 100644
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, Suspense, lazy } from 'react';
 import {
 	BrowserRouter,
   Switch,
@@ -6,14 +6,13 @@ import {
 } from 'react-router-dom';
 import { ThemeProvider, Global } from '@emotion/react';
 
-import { Settings } from 'components';
-import {
-	Home,
-	Event,
-} from 'pages';
+import { Settings, Loading } from 'components';
 
 import theme from 'theme';
 
+const Home = lazy(() => import('pages/Home/Home'));
+const Event = lazy(() => import('pages/Event/Event'));
+
 const App = () => {
 	const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
 	const [isDark, setIsDark] = useState(darkQuery.matches);
@@ -61,8 +60,16 @@ const App = () => {
 					})}
 				/>
 		    <Switch>
-					<Route path="/" component={Home} exact />
-					<Route path="/:id" component={Event} exact />
+					<Route path="/" exact render={props => (
+            <Suspense fallback={<Loading />}>
+              <Home {...props} />
+            </Suspense>
+          )} />
+					<Route path="/:id" exact render={props => (
+            <Suspense fallback={<Loading />}>
+              <Event {...props} />
+            </Suspense>
+          )} />
 				</Switch>
 
         <Settings />
diff --git a/crabfit-frontend/src/components/Loading/Loading.tsx b/crabfit-frontend/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..23606b7
--- /dev/null
+++ b/crabfit-frontend/src/components/Loading/Loading.tsx
@@ -0,0 +1,12 @@
+import {
+  Wrapper,
+  Loader,
+} from './loadingStyle';
+
+const Loading = () => (
+  <Wrapper>
+    <Loader />
+  </Wrapper>
+);
+
+export default Loading;
diff --git a/crabfit-frontend/src/components/Loading/loadingStyle.ts b/crabfit-frontend/src/components/Loading/loadingStyle.ts
new file mode 100644
index 0000000..44bd8bb
--- /dev/null
+++ b/crabfit-frontend/src/components/Loading/loadingStyle.ts
@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+`;
+
+export const Loader = styled.div`
+  @keyframes load {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  height: 24px;
+  width: 24px;
+  border: 3px solid ${props => props.theme.primary};
+  border-left-color: transparent;
+  border-radius: 100px;
+  animation: load .5s linear infinite;
+`;
diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts
index 2cff948..dc7571c 100644
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@@ -9,6 +9,7 @@ export { default as Legend } from './Legend/Legend';
 export { default as AvailabilityViewer } from './AvailabilityViewer/AvailabilityViewer';
 export { default as AvailabilityEditor } from './AvailabilityEditor/AvailabilityEditor';
 export { default as Error } from './Error/Error';
+export { default as Loading } from './Loading/Loading';
 
 export { default as Center } from './Center/Center';
 export { default as Donate } from './Donate/Donate';