Lazy load pages

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