Lazy load pages

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