feat(web): use code splitting

web/src/app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 
 import { Route } from "react-router-dom";
 
@@ -9,17 +9,18 @@ import IsListProvider from "context/IsListProvider";
 import { NewDisputeProvider } from "context/NewDisputeContext";
 import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
+const Home = lazy(() => import("./pages/Home"));
+const Cases = lazy(() => import("./pages/Cases"));
+const Dashboard = lazy(() => import("./pages/Dashboard"));
+const Courts = lazy(() => import("./pages/Courts"));
+const DisputeTemplateView = lazy(() => import("./pages/DisputeTemplateView"));
+const DisputeResolver = lazy(() => import("./pages/Resolver"));
+const GetPnk = lazy(() => import("./pages/GetPnk"));
 import Web3Provider from "context/Web3Provider";
 
+import Loader from "components/Loader";
 import Layout from "layout/index";
 
-import Cases from "./pages/Cases";
-import Courts from "./pages/Courts";
-import Dashboard from "./pages/Dashboard";
-import DisputeTemplateView from "./pages/DisputeTemplateView";
-import GetPnk from "./pages/GetPnk";
-import Home from "./pages/Home";
-import DisputeResolver from "./pages/Resolver";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -32,13 +33,62 @@ const App: React.FC = () => {
               <NewDisputeProvider>
                 <SentryRoutes>
                   <Route path="/" element={<Layout />}>
-                    <Route index element={<Home />} />
-                    <Route path="cases/*" element={<Cases />} />
-                    <Route path="courts/*" element={<Courts />} />
-                    <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
-                    <Route path="dispute-template" element={<DisputeTemplateView />} />
-                    <Route path="resolver/*" element={<DisputeResolver />} />
-                    <Route path="get-pnk/*" element={<GetPnk />} />
+                    <Route
+                      index
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Home />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="cases/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Cases />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="courts/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Courts />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="dashboard/:page/:order/:filter"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Dashboard />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="dispute-template"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <DisputeTemplateView />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="resolver/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <DisputeResolver />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="get-pnk/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <GetPnk />
+                        </Suspense>
+                      }
+                    />
                     <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
                   </Route>
                 </SentryRoutes>

web/src/components/Loader.tsx

@@ -28,6 +28,7 @@ const StyledKlerosIcon = styled(KlerosIcon)`
 `;
 
 const Container = styled.div<{ width?: Width; height?: Height }>`
+  margin: auto;
   width: ${({ width }) => width ?? "100%"};
   height: ${({ height }) => height ?? "100%"};
 `;

web/src/layout/index.tsx

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