fix: wrap useSearchParams in Suspense boundary for profile page

This commit is contained in:
Ajax Davis 2026-01-14 04:25:02 +10:00
parent 77e697db56
commit fefc316038

View file

@ -4,7 +4,7 @@ import { Button } from '@tpmjs/ui/Button/Button';
import { Icon } from '@tpmjs/ui/Icon/Icon';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { Suspense, useCallback, useEffect, useState } from 'react';
import { DashboardLayout } from '~/components/dashboard/DashboardLayout';
interface UserProfile {
@ -21,10 +21,7 @@ interface UsernameCheckResult {
reason?: string;
}
export default function ProfileSettingsPage(): React.ReactElement {
const searchParams = useSearchParams();
const isSetupMode = searchParams.get('setup') === '1';
function ProfileSettingsContent({ isSetupMode }: { isSetupMode: boolean }): React.ReactElement {
const [profile, setProfile] = useState<UserProfile | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@ -335,3 +332,26 @@ export default function ProfileSettingsPage(): React.ReactElement {
</DashboardLayout>
);
}
function ProfileSettingsWithSearchParams(): React.ReactElement {
const searchParams = useSearchParams();
const isSetupMode = searchParams.get('setup') === '1';
return <ProfileSettingsContent isSetupMode={isSetupMode} />;
}
export default function ProfileSettingsPage(): React.ReactElement {
return (
<Suspense
fallback={
<DashboardLayout title="Profile Settings" showBackButton backUrl="/dashboard">
<div className="animate-pulse">
<div className="h-8 bg-surface-secondary rounded w-48 mb-4" />
<div className="h-32 bg-surface-secondary rounded mb-6" />
</div>
</DashboardLayout>
}
>
<ProfileSettingsWithSearchParams />
</Suspense>
);
}