error and load state

apps/website/app/onboarding/page.tsx

@@ -1,19 +1,31 @@
 'use client';
 
-import { Loader2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
 import OnboardingWizard from '@/components/onboarding/OnboardingWizard';
-import { useCurrentDriver } from '@/hooks/useDriverService';
 import { useAuth } from '@/lib/auth/AuthContext';
+
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { useServices } from '@/lib/services/ServiceProvider';
  
 export default function OnboardingPage() {
   const router = useRouter();
   const { session } = useAuth();
-  const { data: driver, isLoading } = useCurrentDriver();
+  const { driverService } = useServices();
 
+  // Check if user is logged in
   const shouldRedirectToLogin = !session;
+
+  // Fetch current driver data
+  const { data: driver, isLoading } = useDataFetching({
+    queryKey: ['currentDriver'],
+    queryFn: () => driverService.getCurrentDriver(),
+    enabled: !!session,
+  });
+
   const shouldRedirectToDashboard = !isLoading && Boolean(driver);
 
   useEffect(() => {
@@ -32,8 +44,8 @@ export default function OnboardingPage() {
 
   if (isLoading) {
     return (
-      <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-        <Loader2 className="w-8 h-8 text-primary-blue animate-spin" />
+      <main className="min-h-screen bg-deep-graphite">
+        <LoadingWrapper variant="full-screen" message="Loading onboarding..." />
       </main>
     );
   }
@@ -47,4 +59,4 @@ export default function OnboardingPage() {
       <OnboardingWizard />
     </main>
   );
-}
+ }