Add loading screen when user is loading

jonashonecker · Jul 5, 2024 · 809daa4 · 809daa4
1 parent cf7803b
commit 809daa4
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/frontend/src/components/utils/ProtectedRoute.tsx b/frontend/src/components/utils/ProtectedRoute.tsx
@@ -1,5 +1,6 @@
 import { Navigate, Outlet } from "react-router-dom";
 import { User } from "../../types/User.ts";
+import { AppBar, Skeleton, Toolbar } from "@mui/material";
 
 type ProtectedRouteProps = {
   user: User | undefined | null;
@@ -11,7 +12,15 @@ export default function ProtectedRoute({
   isTargetLoginPage,
 }: Readonly<ProtectedRouteProps>) {
   if (user === undefined) {
-    return <div>Loading...</div>;
+    return (
+      <>
+        <AppBar elevation={0} position={"sticky"}>
+          <Toolbar>
+            <Skeleton variant={"rectangular"} width={"100%"} height={26} />
+          </Toolbar>
+        </AppBar>
+      </>
+    );
   }
 
   //When user is logged in, don't show login page