From 604cd146983acdf5489d5f411d0fb5a01e70f92f Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 5 Dec 2025 02:22:17 -0500
Subject: [PATCH] feat: enhance map loading state with skeleton UI and update
 viewport height units to dvh

---
 src/app/page.tsx             |  2 +-
 src/components/Drawer.tsx    |  2 +-
 src/components/MapLoader.tsx | 28 +++++++++++++++++++++++-----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c8526a7..d1c504a 100644
--- a/src/app/page.tsx
+++ b/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
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index 549a192..2e7352e 100644
--- a/src/components/Drawer.tsx
+++ b/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 ? (
diff --git a/src/components/MapLoader.tsx b/src/components/MapLoader.tsx
index a19bda6..be9faa1 100644
--- a/src/components/MapLoader.tsx
+++ b/src/components/MapLoader.tsx
@@ -1,11 +1,9 @@
 "use client";
 
 import dynamic from "next/dynamic";
-
-const Map = dynamic(() => import("./Map"), {
-    ssr: false,
-    loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
-});
+import { useState, useEffect } from "react";
+import { Skeleton } from "~/components/ui/skeleton";
+import { Coffee } from "lucide-react";
 
 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} />;
 }