feat(web): add loading page for code splitting

Author: alcercu

web/src/Loading.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+import KlerosIcon from "svgs/icons/kleros.svg";
+
+const Container = styled.div`
+  position: relative;
+  flex: 1;
+  width: 100%;
+`;
+
+const Wrapper = styled.div`
+  position: absolute;
+  width: 20%;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+`;
+
+const breathing = keyframes`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`;
+
+const AnimatedKlerosIcon = styled(KlerosIcon)`
+  animation: ${breathing} 2s ease-out infinite normal;
+  margin-bottom: 26px;
+`;
+
+const Loading: React.FC = () => {
+  return (
+    <Container>
+      <Wrapper>
+        <AnimatedKlerosIcon />
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default Loading;

web/src/app.tsx

@@ -10,6 +10,7 @@ import StyledComponentsProvider from "context/StyledComponentsProvider";
 import RefetchOnBlock from "context/RefetchOnBlock";
 import { NewDisputeProvider } from "./context/NewDisputeContext";
 import Layout from "layout/index";
+import Loading from "./Loading";
 
 const Home = lazy(() => import("./pages/Home"));
 const Cases = lazy(() => import("./pages/Cases"));
@@ -31,47 +32,47 @@ const App: React.FC = () => {
                   <Route
                     index
                     element={
-                      <Suspense>
+                      <Suspense fallback={<Loading />}>
                         <Home />
                       </Suspense>
                     }
                   />
                   <Route
                     path="cases/*"
                     element={
-                      <Suspense>
+                      <Suspense fallback={<Loading />}>
                         <Cases />
                       </Suspense>
                     }
                   />
                   <Route
                     path="courts/*"
                     element={
-                      <Suspense>
+                      <Suspense fallback={<Loading />}>
                         <Courts />
                       </Suspense>
                     }
                   />
                   <Route
                     path="dashboard/:page/:order/:filter"
                     element={
-                      <Suspense>
+                      <Suspense fallback={<Loading />}>
                         <Dashboard />
                       </Suspense>
                     }
                   />
                   <Route
                     path="disputeTemplate"
                     element={
-                      <Suspense>
+                      <Suspense fallback={<Loading />}>
                         <DisputeTemplateView />
                       </Suspense>
                     }
                   />
                   <Route
                     path="resolver/*"
                     element={
-                      <Suspense>
+                      <Suspense fallback={<Loading />}>
                         <DisputeResolver />
                       </Suspense>
                     }

web/src/layout/index.tsx

@@ -26,6 +26,7 @@ const StyledToastContainer = styled(ToastContainer)`
 `;
 
 const OutletContainer = styled.div`
+  display: flex;
   flex: 1;
   background-color: ${({ theme }) => theme.lightBackground};
 `;