RHL-020 refactor(layout): implement Suspense fallback and AuthProvider for session management

app/(protected)/layout.jsx

@@ -1,14 +1,46 @@
+// ---------------------------------------------------------------------------
+// Folder: app/(protected)
+// File: layout.jsx
+// Relative Path: app/(protected)/layout.jsx
+// ---------------------------------------------------------------------------
+
+import React, { Suspense } from "react";
+import { Loader2 } from "lucide-react";
+
 import AppShell from "@/components/app-shell/AppShell";
+import AuthProvider from "@/components/auth/AuthProvider";
 
 /**
- * Protected layout:
- * - Wraps all authenticated pages in a consistent application shell
- * - No auth guard yet (comes in later tickets)
+ * Protected layout (RHL-020)
+ *
+ * Best practice for `useSearchParams()`:
+ * - AuthProvider uses `useSearchParams()` (client hook).
+ * - During production builds, static prerendering requires a Suspense boundary
+ *   above the component using `useSearchParams()`.
  *
- * RHL-019 goal:
- * - the layout exists and is stable so later we only add guard logic,
- *   without restructuring the UI.
+ * This Suspense fallback will be part of the initial HTML for static rendering.
+ * After hydration, AuthProvider takes over and performs the session check.
  */
+
+function AuthProviderFallback() {
+	return (
+		<div className="min-h-screen w-full px-4">
+			<div className="mx-auto flex min-h-screen max-w-md items-center justify-center">
+				<div className="flex items-center gap-3 text-sm text-muted-foreground">
+					<Loader2 className="h-4 w-4 animate-spin" />
+					<span>Preparing session...</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
 export default function ProtectedLayout({ children }) {
-	return <AppShell>{children}</AppShell>;
+	return (
+		<Suspense fallback={<AuthProviderFallback />}>
+			<AuthProvider>
+				<AppShell>{children}</AppShell>
+			</AuthProvider>
+		</Suspense>
+	);
 }