From c917a639c4207b8c5681f709dbe100864aacb38e Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason.woltje@uscllc.com>
Date: Mon, 16 Feb 2026 17:07:18 -0600
Subject: [PATCH] fix(#411): wrap login page useSearchParams in Suspense
 boundary

Next.js 16 requires useSearchParams() to be inside a <Suspense> boundary
for static prerendering. Extracted LoginPageContent inner component and
wrapped it in Suspense with a loading fallback that matches the existing
loading spinner UI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/(auth)/login/page.tsx | 30 +++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index 5c56d81..1565d8d 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { Suspense, useEffect, useState, useCallback } from "react";
 import type { ReactElement } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
@@ -15,6 +15,34 @@ import { AuthDivider } from "@/components/auth/AuthDivider";
 import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
 
 export default function LoginPage(): ReactElement {
+  return (
+    <Suspense
+      fallback={
+        <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
+          <div className="w-full max-w-md space-y-8">
+            <div className="text-center">
+              <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
+            </div>
+            <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md">
+              <div
+                className="flex items-center justify-center py-8"
+                role="status"
+                aria-label="Loading authentication options"
+              >
+                <Loader2 className="h-8 w-8 animate-spin text-blue-500" aria-hidden="true" />
+                <span className="sr-only">Loading authentication options</span>
+              </div>
+            </div>
+          </div>
+        </main>
+      }
+    >
+      <LoginPageContent />
+    </Suspense>
+  );
+}
+
+function LoginPageContent(): ReactElement {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [config, setConfig] = useState<AuthConfigResponse | null | undefined>(undefined);