error and load state

apps/website/app/races/[id]/stewarding/RaceStewardingInteractive.tsx

@@ -3,19 +3,30 @@
 import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
-import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
 import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
 
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { StateContainer } from '@/components/shared/state/StateContainer';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { Gavel } from 'lucide-react';
+
 export function RaceStewardingInteractive() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
+  const { raceStewardingService } = useServices();
 
-  // Fetch data
-  const { data: stewardingData, isLoading, error } = useRaceStewardingData(raceId, currentDriverId);
+  // Fetch data using new hook
+  const { data: stewardingData, isLoading, error, retry } = useDataFetching({
+    queryKey: ['raceStewardingData', raceId, currentDriverId],
+    queryFn: () => raceStewardingService.getRaceStewardingData(raceId, currentDriverId),
+  });
+
+  // Fetch membership
   const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
 
   // UI State
@@ -47,15 +58,34 @@ export function RaceStewardingInteractive() {
   } : undefined;
 
   return (
-    <RaceStewardingTemplate
-      stewardingData={templateData}
+    <StateContainer
+      data={stewardingData}
       isLoading={isLoading}
       error={error}
-      onBack={handleBack}
-      onReviewProtest={handleReviewProtest}
-      isAdmin={isAdmin}
-      activeTab={activeTab}
-      setActiveTab={setActiveTab}
-    />
+      retry={retry}
+      config={{
+        loading: { variant: 'skeleton', message: 'Loading stewarding data...' },
+        error: { variant: 'full-screen' },
+        empty: {
+          icon: Gavel,
+          title: 'No stewarding data',
+          description: 'No protests or penalties for this race',
+          action: { label: 'Back to Race', onClick: handleBack }
+        }
+      }}
+    >
+      {(stewardingData) => (
+        <RaceStewardingTemplate
+          stewardingData={templateData}
+          isLoading={false}
+          error={null}
+          onBack={handleBack}
+          onReviewProtest={handleReviewProtest}
+          isAdmin={isAdmin}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+        />
+      )}
+    </StateContainer>
   );
-}
+ }