4 files changed, 48 insertions, 8 deletions
diff --git a/app/src/app/map/page.tsx b/app/src/app/map/page.tsx
index c0f23ac..3ca8a7e 100644
--- a/app/src/app/map/page.tsx
+++ b/app/src/app/map/page.tsx
@@ -7,11 +7,17 @@ import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "sonner";
 import Link from "next/link";
 import ShareLocationForm from "@/components/ShareLocationForm";
+import { Loader2 } from "lucide-react";
 
-// Dynamically import the Map component to avoid SSR issues with Leaflet
+// Dynamically import the Map component with SSR disabled
 const MapWithNoSSR = dynamic(() => import("@/components/Map"), {
   ssr: false,
-  loading: () => <div className="h-[70vh] flex items-center justify-center">Loading map...</div>,
+  loading: () => (
+    <div className="h-full w-full flex items-center justify-center bg-accent/10">
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      <span className="ml-2">Loading map...</span>
+    </div>
+  ),
 });
 
 interface Location {
diff --git a/app/src/app/share/page.tsx b/app/src/app/share/page.tsx
index 60cac27..7776ed2 100644
--- a/app/src/app/share/page.tsx
+++ b/app/src/app/share/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import Map from "@/components/Map";
+import dynamic from "next/dynamic";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Loader2, Copy, Mail, Share2 } from "lucide-react";
@@ -18,6 +18,17 @@ interface LocationType {
   timestamp: Date;
 }
 
+// Dynamically import the Map component with SSR disabled
+const MapWithNoSSR = dynamic(() => import("@/components/Map"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full w-full flex items-center justify-center bg-accent/10">
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      <span className="ml-2">Loading map...</span>
+    </div>
+  ),
+});
+
 export default function ShareLocation() {
   const [location, setLocation] = useState<LocationType | null>(null);
   const [email, setEmail] = useState<string>("");
@@ -140,7 +151,7 @@ export default function ShareLocation() {
               </CardDescription>
             </CardHeader>
             <CardContent className="flex-grow h-[calc(100%-140px)]">
-              <Map 
+              <MapWithNoSSR 
                 onLocationUpdate={handleLocationUpdate} 
                 shareToken={isSharing ? shareToken : undefined}
               />
diff --git a/app/src/app/track/page.tsx b/app/src/app/track/page.tsx
index 060d391..c8045d2 100644
--- a/app/src/app/track/page.tsx
+++ b/app/src/app/track/page.tsx
@@ -2,10 +2,22 @@
 
 import { useState, useEffect } from "react";
 import { useSocket } from "@/hooks/useSocket";
-import Map from "@/components/Map";
+import dynamic from "next/dynamic";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+// Dynamically import the Map component with SSR disabled
+const MapWithNoSSR = dynamic(() => import("@/components/Map"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full w-full flex items-center justify-center bg-accent/10">
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      <span className="ml-2">Loading map...</span>
+    </div>
+  ),
+});
 
 export default function TrackPage() {
   const [userId, setUserId] = useState<string>("");
@@ -73,7 +85,7 @@ export default function TrackPage() {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         <div className="md:col-span-2">
           <div className="h-[500px] rounded-lg overflow-hidden border">
-            <Map 
+            <MapWithNoSSR 
               onLocationUpdate={handleLocationUpdate} 
               mode="tracking"
             />
diff --git a/app/src/app/view/page.tsx b/app/src/app/view/page.tsx
index 9786e4a..f75333b 100644
--- a/app/src/app/view/page.tsx
+++ b/app/src/app/view/page.tsx
@@ -2,12 +2,23 @@
 
 import { useState, useEffect } from "react";
 import { useSearchParams } from "next/navigation";
-import Map from "@/components/Map";
+import dynamic from "next/dynamic";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Loader2, AlertTriangle, MapPin } from "lucide-react";
 import { useSocket } from "@/hooks/useSocket";
 
+// Dynamically import the Map component with SSR disabled
+const MapWithNoSSR = dynamic(() => import("@/components/Map"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full w-full flex items-center justify-center bg-accent/10">
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      <span className="ml-2">Loading map...</span>
+    </div>
+  ),
+});
+
 export default function ViewLocation() {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -77,7 +88,7 @@ export default function ViewLocation() {
         </CardHeader>
         <CardContent>
           <div className="h-[500px] md:h-[600px]">
-            <Map mode="view" viewToken={token} />
+            <MapWithNoSSR mode="viewing" shareToken={token} />
           </div>
         </CardContent>
       </Card>