diff --git a/apps/web/src/components/layout/AppLayoutGuard.tsx b/apps/web/src/components/layout/AppLayoutGuard.tsx new file mode 100644 index 0000000..787a58f --- /dev/null +++ b/apps/web/src/components/layout/AppLayoutGuard.tsx @@ -0,0 +1,34 @@ +import { useEffect } from 'react' +import { useQuery } from '@tanstack/react-query' +import { useNavigate } from '@tanstack/react-router' +import { Loader2 } from 'lucide-react' +import { useAuth } from '../../context/AuthProvider' +import { getOnboardingStatus } from '../../lib/api' +import { RootLayout } from './RootLayout' + +export function AppLayoutGuard() { + const { user, isPending } = useAuth() + const navigate = useNavigate() + + const statusQuery = useQuery({ + queryKey: ['onboarding', 'status'], + queryFn: getOnboardingStatus, + enabled: !!user, + staleTime: 5 * 60 * 1000, + }) + + useEffect(() => { + if (!user || !statusQuery.data || statusQuery.data.completed) return + void navigate({ to: '/onboarding', replace: true }) + }, [user, statusQuery.data, navigate]) + + if (isPending || (user && statusQuery.isPending)) { + return ( +