error and load state

apps/website/app/drivers/DriversInteractive.tsx

@@ -1,14 +1,23 @@
 'use client';
 
-import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { DriversTemplate } from '@/templates/DriversTemplate';
-import { useDriverLeaderboard } from '@/hooks/useDriverService';
 import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
 
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { StateContainer } from '@/components/shared/state/StateContainer';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { Users } from 'lucide-react';
+
 export function DriversInteractive() {
   const router = useRouter();
-  const { data: viewModel, isLoading: loading } = useDriverLeaderboard();
+  const { driverService } = useServices();
+  
+  const { data: viewModel, isLoading: loading, error, retry } = useDataFetching({
+    queryKey: ['driverLeaderboard'],
+    queryFn: () => driverService.getDriverLeaderboard(),
+  });
   
   const drivers = viewModel?.drivers || [];
   const totalRaces = viewModel?.totalRaces || 0;
@@ -16,17 +25,35 @@ export function DriversInteractive() {
   const activeCount = viewModel?.activeCount || 0;
 
   // Transform data for template
-  const driverViewModels = drivers.map((driver, index) => 
+  const driverViewModels = drivers.map((driver, index) =>
     new DriverLeaderboardItemViewModel(driver, index + 1)
   );
 
   return (
-    <DriversTemplate
-      drivers={driverViewModels}
-      totalRaces={totalRaces}
-      totalWins={totalWins}
-      activeCount={activeCount}
+    <StateContainer
+      data={viewModel}
       isLoading={loading}
-    />
+      error={error}
+      retry={retry}
+      config={{
+        loading: { variant: 'skeleton', message: 'Loading driver leaderboard...' },
+        error: { variant: 'inline' },
+        empty: {
+          icon: Users,
+          title: 'No drivers found',
+          description: 'There are no drivers in the system yet',
+        }
+      }}
+    >
+      {(leaderboardData) => (
+        <DriversTemplate
+          drivers={driverViewModels}
+          totalRaces={totalRaces}
+          totalWins={totalWins}
+          activeCount={activeCount}
+          isLoading={false}
+        />
+      )}
+    </StateContainer>
   );
-}
+ }