feat: enhance map loading state with skeleton UI and update viewport height units to dvh

src/app/page.tsx

@@ -12,7 +12,7 @@ export default function HomePage() {
   const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
 
   return (
-    <main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
+    <main className="relative h-dvh w-screen overflow-hidden bg-black text-white font-serif">
       {/* Map Background */}
       <div className="absolute inset-0 z-0">
         <MapLoader

src/components/Drawer.tsx

@@ -45,7 +45,7 @@ export default function Drawer({ shop, shops, onSelect, onClose, isOpen }: Drawe
 
     return (
         <div
-            className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
+            className={`absolute top-20 left-0 h-[calc(100dvh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
         >
             <Card className="h-full w-full bg-background/40 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0 transition-all duration-300">
                 {shop ? (

src/components/MapLoader.tsx

@@ -1,11 +1,9 @@
 "use client";
 
 import dynamic from "next/dynamic";
-
+import { useState, useEffect } from "react";
-const Map = dynamic(() => import("./Map"), {
+import { Skeleton } from "~/components/ui/skeleton";
-    ssr: false,
+import { Coffee } from "lucide-react";
-    loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
-});
 
 interface CoffeeShop {
     id: number;
@@ -28,5 +26,25 @@ interface MapLoaderProps {
 }
 
 export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapLoaderProps) {
+    const [isLoading, setIsLoading] = useState(true);
+
+    const Map = dynamic(() => import("./Map"), {
+        ssr: false,
+        loading: () => (
+            <div className="w-full h-full relative bg-background">
+                <Skeleton className="w-full h-full absolute inset-0" />
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <Coffee className="h-16 w-16 text-muted-foreground/50 animate-pulse" />
+                </div>
+            </div>
+        ),
+    });
+
+    useEffect(() => {
+        // Small delay to ensure smooth transition
+        const timer = setTimeout(() => setIsLoading(false), 100);
+        return () => clearTimeout(timer);
+    }, []);
+
     return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />;
 }