Merge branch 'dev' into feat/more-robust-type-validations-in-sdk

Author: kemuru

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

web/src/pages/GetPnk/index.tsx

@@ -10,6 +10,10 @@ import HeroImage from "components/HeroImage";
 
 import { Widget } from "./Widget";
 
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
@@ -25,13 +29,13 @@ const Container = styled.div`
 
 const GetPnk: React.FC = () => {
   return (
-    <>
+    <Wrapper>
       <HeroImage />
       <Container>
         {!isProductionDeployment() && <ClaimPnkButton />}
         <Widget />
       </Container>
-    </>
+    </Wrapper>
   );
 };
 

web/src/pages/Home/index.tsx

@@ -13,6 +13,10 @@ import Community from "./Community";
 import CourtOverview from "./CourtOverview";
 import TopJurors from "./TopJurors";
 
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
@@ -24,13 +28,15 @@ const Container = styled.div`
 const Home: React.FC = () => {
   return (
     <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-      <HeroImage />
-      <Container>
-        <CourtOverview />
-        <LatestCases />
-        <TopJurors />
-        <Community />
-      </Container>
+      <Wrapper>
+        <HeroImage />
+        <Container>
+          <CourtOverview />
+          <LatestCases />
+          <TopJurors />
+          <Community />
+        </Container>
+      </Wrapper>
     </HomePageProvider>
   );
 };

web/src/pages/Resolver/index.tsx

@@ -22,6 +22,10 @@ import Policy from "./Policy";
 import Preview from "./Preview";
 import Timeline from "./Timeline";
 
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -71,7 +75,7 @@ const DisputeResolver: React.FC = () => {
   const { isConnected } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
   return (
-    <>
+    <Wrapper>
       <HeroImage />
       <Container>
         {isConnected && !isPreviewPage ? <StyledLabel>Start a case</StyledLabel> : null}
@@ -101,7 +105,7 @@ const DisputeResolver: React.FC = () => {
           </ConnectWalletContainer>
         )}
       </Container>
-    </>
+    </Wrapper>
   );
 };