feat: add global loading and error states

src/app/error.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function GlobalError({ error, reset }: ErrorProps) {
+  return (
+    <div className="flex h-screen items-center justify-center bg-torea-bay-50 p-4">
+      <div className="flex max-w-md flex-col items-center text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
+          <AlertCircle className="h-8 w-8 text-red-600" />
+        </div>
+
+        <h1 className="mt-6 text-2xl font-bold text-torea-bay-800">Something went wrong</h1>
+
+        <p className="mt-2 text-muted-foreground">
+          {error.message || "We couldn't load the page. Please try again."}
+        </p>
+
+        <button
+          onClick={reset}
+          className="mt-8 inline-flex items-center justify-center gap-2 rounded-full bg-torea-bay-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-torea-bay-700"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/loading.tsx

@@ -0,0 +1,16 @@
+import { Sidebar } from '@/components/layout/sidebar';
+import { NetworkListSkeleton } from '@/components/networks/network-list-skeleton';
+import { MapSkeleton } from '@/components/map/map-skeleton';
+
+export default function Loading() {
+  return (
+    <div className="flex h-screen flex-col lg:flex-row">
+      <Sidebar>
+        <NetworkListSkeleton />
+      </Sidebar>
+      <main className="relative min-h-[300px] flex-1 lg:min-h-0">
+        <MapSkeleton />
+      </main>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,47 +1,25 @@
-import { Suspense } from 'react';
 import { Sidebar } from '@/components/layout/sidebar';
-import { MapSkeleton, MapContainer } from '@/components/map';
-import { NetworkSidebar, NetworkListSkeleton } from '@/components/networks';
+import { MapContainer } from '@/components/map';
+import { NetworkSidebar } from '@/components/networks';
 import { FilteredNetworksProvider } from '@/contexts';
 import { fetchNetworks } from '@/lib/api/networks';
 import { getUniqueCountries } from '@/lib/utils';
 
-function MainContent({ countries }: { countries: string[] }) {
-  return (
-    <div className="flex h-screen flex-col lg:flex-row">
-      {/* Sidebar - Network list and filters */}
-      <Sidebar>
-        <NetworkSidebar countries={countries} />
-      </Sidebar>
-
-      {/* Map area - Takes remaining space */}
-      <main className="relative min-h-[300px] flex-1 lg:min-h-0">
-        <MapContainer />
-      </main>
-    </div>
-  );
-}
-
 export default async function Home() {
   const networks = await fetchNetworks();
   const countries = getUniqueCountries(networks);
 
   return (
-    <Suspense
-      fallback={
-        <div className="flex h-screen flex-col lg:flex-row">
-          <Sidebar>
-            <NetworkListSkeleton />
-          </Sidebar>
-          <main className="relative min-h-[300px] flex-1 lg:min-h-0">
-            <MapSkeleton />
-          </main>
-        </div>
-      }
-    >
-      <FilteredNetworksProvider networks={networks}>
-        <MainContent countries={countries} />
-      </FilteredNetworksProvider>
-    </Suspense>
+    <FilteredNetworksProvider networks={networks}>
+      <div className="flex h-screen flex-col lg:flex-row">
+        <Sidebar>
+          <NetworkSidebar countries={countries} />
+        </Sidebar>
+
+        <main className="relative min-h-[300px] flex-1 lg:min-h-0">
+          <MapContainer />
+        </main>
+      </div>
+    </FilteredNetworksProvider>
   );
 }