applayout added, sidebar updated

apps/Frontend/src/lib/protected-route.tsx

@@ -1,33 +1,37 @@
+import AppLayout from "@/components/layout/app-layout";
+import LoadingScreen from "@/components/ui/LoadingScreen";
 import { useAuth } from "@/hooks/use-auth";
-import { Loader2 } from "lucide-react";
+import { Suspense } from "react";
 import { Redirect, Route } from "wouter";
 
+type ComponentLike = React.ComponentType; // works for both lazy() and regular components
+
 export function ProtectedRoute({
   path,
   component: Component,
 }: {
   path: string;
-  component: () => React.JSX.Element;
+  component: ComponentLike;
 }) {
   const { user, isLoading } = useAuth();
 
-  if (isLoading) {
-    return (
-      <Route path={path}>
-        <div className="flex items-center justify-center min-h-screen">
-          <Loader2 className="h-8 w-8 animate-spin text-border" />
-        </div>
-      </Route>
-    );
-  }
-
-  if (!user) {
-    return (
-      <Route path={path}>
+  return (
+    <Route path={path}>
+      {/* While auth is resolving: keep layout visible and show a small spinner in the content area */}
+      {isLoading ? (
+        <AppLayout>
+          <LoadingScreen />
+        </AppLayout>
+      ) : !user ? (
         <Redirect to="/auth" />
-      </Route>
-    );
-  }
-
-  return <Route path={path} component={Component} />;
+      ) : (
+        // Authenticated: render page inside layout. Lazy pages load with an in-layout spinner.
+        <AppLayout>
+          <Suspense fallback={<LoadingScreen />}>
+            <Component />
+          </Suspense>
+        </AppLayout>
+      )}
+    </Route>
+  );
 }