mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix(#411): wrap login page useSearchParams in Suspense boundary
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Details

Browse Source 
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>
This commit is contained in:
Jason Woltje
2026-02-16 17:07:18 -06:00
parent 9d3a673e6c
commit c917a639c4
1 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web/src/app/(auth)/login/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState, useCallback } from "react"; import { Suspense, useEffect, useState, useCallback } from "react";
import type { ReactElement } from "react"; import type { ReactElement } from "react";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { Loader2 } from "lucide-react"; import { Loader2 } from "lucide-react";
@@ -15,6 +15,34 @@ import { AuthDivider } from "@/components/auth/AuthDivider";
import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner"; import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
export default function LoginPage(): ReactElement { 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 router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [config, setConfig] = useState<AuthConfigResponse | null | undefined>(undefined); const [config, setConfig] = useState<AuthConfigResponse | null | undefined>(undefined);