feat: enhance LoadingSpinner component with customizable props and refactor App component for improved routing

Author: andrenormanlang

apps/client/src/App.tsx

@@ -1,7 +1,7 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Navbar from "./components/NavBar";
 import Footer from "./components/Footer";
-import React, { Suspense } from "react";
+import React, { Suspense, useState } from "react";
 import LoadingSpinner from "./helpers/LoadingSpinner";
 import { UserProvider } from "./contexts/UserContext";
 import { GradientProvider } from "./contexts/GradientContext";
@@ -17,6 +17,27 @@ const EmailVerificationPage = React.lazy(
 const ResetPasswordPage = React.lazy(() => import("./pages/ResetPasswordPage"));
 
 function App() {
+  const [isReady, setIsReady] = useState(false);
+
+  const AppRoutes = () => {
+    React.useEffect(() => {
+      setIsReady(true);
+    }, []);
+    return (
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route
+          path="/verify-email"
+          element={<EmailVerificationPage />}
+        />
+        <Route
+          path="/reset-password"
+          element={<ResetPasswordPage />}
+        />
+      </Routes>
+    );
+  };
+
   return (
     <>
       <Toaster />
@@ -26,20 +47,10 @@ function App() {
             <GradientProvider>
               <SocketProvider>
                 <Navbar />
-                <Suspense fallback={<LoadingSpinner />}>
-                  <Routes>
-                    <Route path="/" element={<HomePage />} />
-                    <Route
-                      path="/verify-email"
-                      element={<EmailVerificationPage />}
-                    />
-                    <Route
-                      path="/reset-password"
-                      element={<ResetPasswordPage />}
-                    />
-                  </Routes>
+                <Suspense fallback={<LoadingSpinner fullScreen overlay />}>
+                  <AppRoutes />
                 </Suspense>
-                <Footer />
+                {isReady && <Footer />}
               </SocketProvider>
             </GradientProvider>
           </UserProvider>

apps/client/src/helpers/LoadingSpinner.tsx

@@ -1,8 +1,30 @@
 import { Spinner } from "../components/shadcn/ui/spinner";
 
-const LoadingSpinner = () => {
+type Props = {
+  fullScreen?: boolean;
+  overlay?: boolean;
+  className?: string;
+};
+
+const LoadingSpinner = ({
+  fullScreen = false,
+  overlay = false,
+  className = "",
+}: Props) => {
+  const base = "flex justify-center items-center";
+
+  if (fullScreen) {
+    return (
+      <div
+        className={`${base} fixed inset-0 z-50 ${overlay ? "bg-black/50" : ""}`}
+      >
+        <Spinner size="large" className="text-teal-500" />
+      </div>
+    );
+  }
+
   return (
-    <div className="flex justify-center items-center h-screen">
+    <div className={`${base} w-full ${className}`}>
       <Spinner size="large" className="text-teal-500" />
     </div>
   );