error and load state

apps/website/app/dashboard/page.tsx

@@ -27,41 +27,53 @@ import { UpcomingRaceItem } from '@/components/dashboard/UpcomingRaceItem';
 import { FriendItem } from '@/components/dashboard/FriendItem';
 import { FeedItemRow } from '@/components/dashboard/FeedItemRow';
 
-import { useDashboardOverview } from '@/hooks/useDashboardService';
 import { getCountryFlag } from '@/lib/utilities/country';
 import { getGreeting, timeUntil } from '@/lib/utilities/time';
 
+// Shared state components
+import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
+import { StateContainer } from '@/components/shared/state/StateContainer';
+import { EmptyState } from '@/components/shared/state/EmptyState';
+import { useServices } from '@/lib/services/ServiceProvider';
+
 export default function DashboardPage() {
-    const { data: dashboardData, isLoading, error } = useDashboardOverview();
+    const { dashboardService } = useServices();
+    
+    const { data: dashboardData, isLoading, error, retry } = useDataFetching({
+      queryKey: ['dashboardOverview'],
+      queryFn: () => dashboardService.getDashboardOverview(),
+    });
 
-    if (isLoading) {
-      return (
-        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-          <div className="text-white">Loading dashboard...</div>
-        </main>
-      );
-    }
+    return (
+      <StateContainer
+        data={dashboardData}
+        isLoading={isLoading}
+        error={error}
+        retry={retry}
+        config={{
+          loading: { variant: 'full-screen', message: 'Loading dashboard...' },
+          error: { variant: 'full-screen' },
+          empty: {
+            icon: Activity,
+            title: 'No dashboard data',
+            description: 'Try refreshing the page',
+            action: { label: 'Refresh', onClick: retry }
+          }
+        }}
+      >
+        {(data) => {
+          const currentDriver = data.currentDriver;
+          const nextRace = data.nextRace;
+          const upcomingRaces = data.upcomingRaces;
+          const leagueStandingsSummaries = data.leagueStandings;
+          const feedSummary = { items: data.feedItems };
+          const friends = data.friends;
+          const activeLeaguesCount = data.activeLeaguesCount;
 
-    if (error || !dashboardData) {
-      return (
-        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-          <div className="text-red-400">Failed to load dashboard</div>
-        </main>
-      );
-    }
+          const { totalRaces, wins, podiums, rating, globalRank, consistency } = currentDriver;
 
-    const currentDriver = dashboardData.currentDriver;
-    const nextRace = dashboardData.nextRace;
-    const upcomingRaces = dashboardData.upcomingRaces;
-    const leagueStandingsSummaries = dashboardData.leagueStandings;
-    const feedSummary = { items: dashboardData.feedItems };
-    const friends = dashboardData.friends;
-    const activeLeaguesCount = dashboardData.activeLeaguesCount;
-
-    const { totalRaces, wins, podiums, rating, globalRank, consistency } = currentDriver;
-
-  return (
-    <main className="min-h-screen bg-deep-graphite">
+          return (
+            <main className="min-h-screen bg-deep-graphite">
       {/* Hero Section */}
       <section className="relative overflow-hidden">
         {/* Background Pattern */}
@@ -327,4 +339,7 @@ export default function DashboardPage() {
       </section>
     </main>
   );
+       }}
+     </StateContainer>
+   );
 }