feat(web): use code splitting

Author: alcercu

web/src/app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import { Route } from "react-router-dom";
 import { SentryRoutes } from "./utils/sentry";
 import "react-loading-skeleton/dist/skeleton.css";
@@ -8,14 +8,15 @@ import IsListProvider from "context/IsListProvider";
 import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
 import RefetchOnBlock from "context/RefetchOnBlock";
-import Layout from "layout/index";
-import Home from "./pages/Home";
-import Cases from "./pages/Cases";
-import Dashboard from "./pages/Dashboard";
-import Courts from "./pages/Courts";
-import DisputeTemplateView from "./pages/DisputeTemplateView";
-import DisputeResolver from "./pages/Resolver";
 import { NewDisputeProvider } from "./context/NewDisputeContext";
+import Layout from "layout/index";
+
+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 App: React.FC = () => {
   return (
@@ -27,12 +28,54 @@ 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="disputeTemplate" element={<DisputeTemplateView />} />
-                  <Route path="resolver/*" element={<DisputeResolver />} />
+                  <Route
+                    index
+                    element={
+                      <Suspense>
+                        <Home />
+                      </Suspense>
+                    }
+                  />
+                  <Route
+                    path="cases/*"
+                    element={
+                      <Suspense>
+                        <Cases />
+                      </Suspense>
+                    }
+                  />
+                  <Route
+                    path="courts/*"
+                    element={
+                      <Suspense>
+                        <Courts />
+                      </Suspense>
+                    }
+                  />
+                  <Route
+                    path="dashboard/:page/:order/:filter"
+                    element={
+                      <Suspense>
+                        <Dashboard />
+                      </Suspense>
+                    }
+                  />
+                  <Route
+                    path="disputeTemplate"
+                    element={
+                      <Suspense>
+                        <DisputeTemplateView />
+                      </Suspense>
+                    }
+                  />
+                  <Route
+                    path="resolver/*"
+                    element={
+                      <Suspense>
+                        <DisputeResolver />
+                      </Suspense>
+                    }
+                  />
                   <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
                 </Route>
               </SentryRoutes>