page wrapper

apps/website/app/onboarding/page.tsx

@@ -8,7 +8,12 @@ import { useAuth } from '@/lib/auth/AuthContext';
 
 // Shared state components
 import { useCurrentDriver } from '@/hooks/driver/useCurrentDriver';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
+
+// Template component that accepts data
+function OnboardingTemplate({ data }: { data: any }) {
+  return <OnboardingWizard />;
+}
 
 export default function OnboardingPage() {
   const router = useRouter();
@@ -18,7 +23,7 @@ export default function OnboardingPage() {
   const shouldRedirectToLogin = !session;
 
   // Fetch current driver data using DI + React-Query
-  const { data: driver, isLoading } = useCurrentDriver({
+  const { data: driver, isLoading, error, refetch } = useCurrentDriver({
     enabled: !!session,
   });
 
@@ -38,21 +43,24 @@ export default function OnboardingPage() {
     return null;
   }
 
-  if (isLoading) {
-    return (
-      <main className="min-h-screen bg-deep-graphite">
-        <LoadingWrapper variant="full-screen" message="Loading onboarding..." />
-      </main>
-    );
-  }
-
   if (shouldRedirectToDashboard) {
     return null;
   }
 
+  // For the StatefulPageWrapper, we need to provide data even if it's empty
+  // The page is workflow-driven, not data-driven
+  const wrapperData = driver || {};
+
   return (
     <main className="min-h-screen bg-deep-graphite">
-      <OnboardingWizard />
+      <StatefulPageWrapper
+        data={wrapperData}
+        isLoading={isLoading}
+        error={error}
+        retry={refetch}
+        Template={OnboardingTemplate}
+        loading={{ variant: 'full-screen', message: 'Loading onboarding...' }}
+      />
     </main>
   );
 }