Lazy load pages

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 { Settings, Loading } from 'components';
-import {
-	Home,
-	Event,
-} from 'pages';
 
 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="/" exact render={props => (
-					<Route path="/:id" component={Event} exact />
+            <Suspense fallback={<Loading />}>
+              <Home {...props} />
+            </Suspense>
+          )} />
+					<Route path="/:id" exact render={props => (
+            <Suspense fallback={<Loading />}>
+              <Event {...props} />
+            </Suspense>
+          )} />
 				</Switch>
 
         <Settings />

crabfit-frontend/src/components/Loading/Loading.tsx

@@ -0,0 +1,12 @@
+import {
+  Wrapper,
+  Loader,
+} from './loadingStyle';
+
+const Loading = () => (
+  <Wrapper>
+    <Loader />
+  </Wrapper>
+);
+
+export default Loading;

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;
+`;

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';