feat(web): use Loader component for code lazy loading

Author: alcercu

web/src/app.tsx

@@ -18,6 +18,7 @@ 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 { SentryRoutes } from "./utils/sentry";
@@ -35,55 +36,55 @@ const App: React.FC = () => {
                     <Route
                       index
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <Home />
                         </Suspense>
                       }
                     />
                     <Route
                       path="cases/*"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <Cases />
                         </Suspense>
                       }
                     />
                     <Route
                       path="courts/*"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <Courts />
                         </Suspense>
                       }
                     />
                     <Route
                       path="dashboard/:page/:order/:filter"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <Dashboard />
                         </Suspense>
                       }
                     />
                     <Route
                       path="dispute-template"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <DisputeTemplateView />
                         </Suspense>
                       }
                     />
                     <Route
                       path="resolver/*"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <DisputeResolver />
                         </Suspense>
                       }
                     />
                     <Route
                       path="get-pnk/*"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
                           <GetPnk />
                         </Suspense>
                       }