feat: improved smooth loading

fe/index.html

@@ -42,8 +42,8 @@
         color: #c089ff;
         background: transparent;
         opacity: 0;
-        animation: preload-fade 1500ms ease forwards;
-        animation-delay: 750ms;
+        animation: preload-fade 2500ms ease forwards;
+        animation-delay: 1000ms;
       }
 
       .preload__spinner {
@@ -84,5 +84,8 @@
       </div>
     </div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      document?.querySelector("#root")?.setAttribute("data-loading-start-timestamp", new Date().getTime());
+    </script>
   </body>
 </html>

fe/src/App.tsx

@@ -1,13 +1,6 @@
 import { Theme } from "@radix-ui/themes";
-import { type FC, useEffect, useState } from "react";
-import {
-  createBrowserRouter,
-  Link,
-  Outlet,
-  RouterProvider,
-} from "react-router-dom";
-import Welcome from "./components/Box/sub-pages/Welcome";
-import { MainLayout } from "./components/layout/MainLayout";
+import { lazy, Suspense, useEffect, useState } from "react";
+import { FullPageLoader } from "./components/ui";
 
 function useSystemTheme() {
   const [theme, setTheme] = useState<"light" | "dark">("light");
@@ -28,95 +21,15 @@ function useSystemTheme() {
   return theme;
 }
 
-const Root: FC = () => {
-  return (
-    <>
-      {window.icod2Dev.topNavTools.get() === true && (
-        <nav className="bg-[#ffffffAA] absolute w-full p-2 dark:text-gray-700">
-          <Link to="/" style={{ marginRight: 16, textDecoration: "none" }}>
-            Box
-          </Link>
-          <Link
-            to="/crypto-poc"
-            style={{ marginRight: 16, textDecoration: "none" }}
-          >
-            Crypto Playground
-          </Link>
-          <Link
-            to="/decode-poc"
-            style={{ marginRight: 16, textDecoration: "none" }}
-          >
-            Decode Playground
-          </Link>
-          <Link to="/components-demo" style={{ textDecoration: "none" }}>
-            Components Demo
-          </Link>
-        </nav>
-      )}
-      <MainLayout>
-        <Outlet />
-      </MainLayout>
-    </>
-  );
-};
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    Component: Root,
-    children: [
-      {
-        path: "/crypto-poc",
-        async lazy() {
-          const mod = await import("./components/CryptoPlayground");
-          return { Component: mod.default };
-        },
-      },
-      {
-        path: "/components-demo",
-        async lazy() {
-          const mod = await import("./components/ComponentsDemo");
-          return { Component: mod.default };
-        },
-      },
-      {
-        path: "/decode-poc",
-        async lazy() {
-          const mod = await import("./components/DecodePlayground");
-          return { Component: mod.default };
-        },
-      },
-      {
-        path: "/unlock-box/:roomToken?",
-        async lazy() {
-          const mod = await import(
-            "./components/Box/sub-pages/RestoreBoxes/LockedBox"
-          );
-          return { Component: mod.default };
-        },
-      },
-      {
-        path: "/lock-box/:roomToken?",
-        async lazy() {
-          const mod = await import("./components/Box/sub-pages/CreationBoxes");
-          return { Component: mod.RootLockBox };
-        },
-      },
-      {
-        path: "/",
-        index: true,
-        Component: Welcome,
-      },
-      {
-        path: "*",
-        Component: Welcome,
-      },
-    ],
-  },
-]);
+const LazyRootRoutes = lazy(() =>
+  import("./components/RootRoutes").then((mod) => ({
+    default: mod.RootRoutes,
+  })),
+);
 
 function App() {
   const theme = useSystemTheme();
+  console.log("App");
 
   return (
     <Theme
@@ -128,7 +41,9 @@ function App() {
       radius="medium"
       style={{ backgroundColor: "inherit" }}
     >
-      <RouterProvider router={router} />
+      <Suspense fallback={<FullPageLoader message="Loading Stashcrate..." />}>
+        <LazyRootRoutes />
+      </Suspense>
     </Theme>
   );
 }

fe/src/components/RootRoutes.tsx

@@ -0,0 +1,118 @@
+import { type FC, lazy, Suspense } from "react";
+import {
+  createBrowserRouter,
+  Link,
+  Outlet,
+  RouterProvider,
+} from "react-router-dom";
+import Welcome from "./Box/sub-pages/Welcome";
+import { MainLayout } from "./layout";
+import { FullPageLoader, Loader } from "./ui";
+
+const Root: FC = () => {
+  console.log("Root component rendered");
+  return (
+    <>
+      {window.icod2Dev.topNavTools.get() === true && (
+        <nav className="bg-[#ffffffAA] absolute w-full p-2 dark:text-gray-700">
+          <Link to="/" style={{ marginRight: 16, textDecoration: "none" }}>
+            Box
+          </Link>
+          <Link
+            to="/crypto-poc"
+            style={{ marginRight: 16, textDecoration: "none" }}
+          >
+            Crypto Playground
+          </Link>
+          <Link
+            to="/decode-poc"
+            style={{ marginRight: 16, textDecoration: "none" }}
+          >
+            Decode Playground
+          </Link>
+          <Link to="/components-demo" style={{ textDecoration: "none" }}>
+            Components Demo
+          </Link>
+        </nav>
+      )}
+      <MainLayout>
+        <Suspense fallback={<Loader />}>
+          <Outlet />
+        </Suspense>
+      </MainLayout>
+    </>
+  );
+};
+
+const CreationBoxes = lazy(() =>
+  import("./Box/sub-pages/CreationBoxes").then((mod) => ({
+    default: mod.RootLockBox,
+  })),
+);
+
+const LockedBoxes = lazy(() =>
+  import("./Box/sub-pages/RestoreBoxes/LockedBox").then((mod) => ({
+    default: mod.default,
+  })),
+);
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    Component: Root,
+    HydrateFallback: () => <FullPageLoader message="Loading Stashcrate..." />,
+    children: [
+      {
+        path: "/crypto-poc",
+        async lazy() {
+          const mod = await import("./CryptoPlayground");
+          return { Component: mod.default };
+        },
+      },
+      {
+        path: "/components-demo",
+        async lazy() {
+          const mod = await import("./ComponentsDemo");
+          return { Component: mod.default };
+        },
+      },
+      {
+        path: "/decode-poc",
+        async lazy() {
+          const mod = await import("./DecodePlayground");
+          return { Component: mod.default };
+        },
+      },
+      {
+        path: "/unlock-box/:roomToken?",
+        element: (
+          <Suspense fallback={<FullPageLoader />}>
+            <LockedBoxes />
+          </Suspense>
+        ),
+      },
+      {
+        path: "/lock-box/:roomToken?",
+        element: (
+          <Suspense fallback={<FullPageLoader />}>
+            <CreationBoxes />
+          </Suspense>
+        ),
+      },
+      {
+        path: "/",
+        index: true,
+        Component: Welcome,
+      },
+      {
+        path: "*",
+        Component: Welcome,
+      },
+    ],
+  },
+]);
+
+export const RootRoutes = () => {
+  console.log("RootRoutes component rendered");
+  return <RouterProvider router={router} />;
+};

fe/src/components/ui/FullPageLoader.tsx

@@ -0,0 +1,45 @@
+import { type FC, useEffect, useRef } from "react";
+import { Loader } from "./Loader";
+
+let timeoutHandler: NodeJS.Timeout | undefined;
+
+export const FullPageLoader: FC<{ message?: string }> = ({
+  message = "Loading Stashcrate...",
+}) => {
+  const delayRef = useRef(globalDelayFromNow());
+
+  useEffect(() => {
+    clearTimeout(timeoutHandler);
+
+    return () => {
+      timeoutHandler = setTimeout(() => {
+        window?.document
+          ?.querySelector("#root")
+          ?.setAttribute("data-loading-start-timestamp", "");
+        console.log("Timeout cleared");
+      }, 5000);
+    };
+  }, []);
+
+  return <Loader message={message} fullPage fadeDelay={delayRef.current} />;
+};
+
+export default FullPageLoader;
+
+function globalDelayFromNow() {
+  const startTimestamp = window?.document
+    ?.querySelector("#root")
+    ?.getAttribute("data-loading-start-timestamp");
+
+  console.log(startTimestamp, "XXX");
+
+  if (!startTimestamp) {
+    return 1500;
+  }
+
+  const nowTimestamp = Date.now();
+
+  const diffInMs = nowTimestamp - Number(startTimestamp ?? 0);
+
+  return 1500 - diffInMs;
+}