From 64d76f8347e2e0ca8cacea1fcfe9703964e8b02f Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 5 Dec 2025 02:31:48 -0500
Subject: [PATCH] refactor: Streamline map loading and drawer rendering, remove
 tooltip arrow, and update Navbar tooltip styling with a pulsing indicator.

---
 src/app/page.tsx              | 23 ++++++++---------------
 src/components/MapLoader.tsx  | 34 +++++++++++++---------------------
 src/components/Navbar.tsx     | 10 +++++++---
 src/components/ui/tooltip.tsx |  1 -
 4 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bd86dd1..6b5a7af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,16 +11,11 @@ import { WelcomeModal } from "~/components/WelcomeModal";
 export default function HomePage() {
   const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
   const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
 
   useEffect(() => {
     // Hide discovery panel on mobile initially
     const isMobile = window.innerWidth < 640; // sm breakpoint
     setIsDiscoveryOpen(!isMobile);
-
-    // Mark map as loaded after a short delay
-    const timer = setTimeout(() => setIsMapLoaded(true), 500);
-    return () => clearTimeout(timer);
   }, []);
 
   return (
@@ -40,16 +35,14 @@ export default function HomePage() {
         />
       </div>
 
-      {/* Right Drawer - only show after map loads */}
-      {isMapLoaded && (
-        <Drawer
-          shop={selectedShop}
-          shops={COFFEE_SHOPS}
-          onSelect={setSelectedShop}
-          onClose={() => setSelectedShop(null)}
-          isOpen={isDiscoveryOpen}
-        />
-      )}
+      {/* Right Drawer */}
+      <Drawer
+        shop={selectedShop}
+        shops={COFFEE_SHOPS}
+        onSelect={setSelectedShop}
+        onClose={() => setSelectedShop(null)}
+        isOpen={isDiscoveryOpen}
+      />
       <WelcomeModal />
     </main>
   );
diff --git a/src/components/MapLoader.tsx b/src/components/MapLoader.tsx
index 4022f43..0b3f08d 100644
--- a/src/components/MapLoader.tsx
+++ b/src/components/MapLoader.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useState, useEffect } from "react";
 import { Skeleton } from "~/components/ui/skeleton";
 import { Coffee, Loader2 } from "lucide-react";
 
@@ -23,27 +22,20 @@ interface MapLoaderProps {
     selectedShop: CoffeeShop | null;
 }
 
-export default function MapLoader({ shops, onShopSelect, selectedShop }: 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 flex-col items-center justify-center gap-4">
-                    <Coffee className="h-16 w-16 text-muted-foreground/50" />
-                    <Loader2 className="h-8 w-8 text-primary animate-spin" />
-                </div>
+// Move dynamic import outside component to prevent re-imports
+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 flex-col items-center justify-center gap-4">
+                <Coffee className="h-16 w-16 text-muted-foreground/50" />
+                <Loader2 className="h-8 w-8 text-primary animate-spin" />
             </div>
-        ),
-    });
-
-    useEffect(() => {
-        // Small delay to ensure smooth transition
-        const timer = setTimeout(() => setIsLoading(false), 100);
-        return () => clearTimeout(timer);
-    }, []);
+        </div>
+    ),
+});
 
+export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
     return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} />;
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fda9f13..6b4203d 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { Coffee, PanelLeft, X } from "lucide-react";
+import { ArrowUp, Coffee, PanelLeft, X } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
 import { useState, useEffect } from "react";
@@ -39,7 +39,11 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
     <>
       <div className="absolute top-4 left-4 right-4 z-[1000] flex justify-center pointer-events-none">
         <div className="bg-background/60 backdrop-blur-2xl border border-border/50 shadow-2xl rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 relative">
+            {/* Pulsing indicator ring */}
+            {showTooltip && (
+              <div className="absolute inset-0 rounded-lg animate-ping bg-primary/30 pointer-events-none" />
+            )}
             <TooltipProvider>
               <Tooltip open={showTooltip} onOpenChange={setShowTooltip}>
                 <TooltipTrigger asChild>
@@ -57,7 +61,7 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
                     <span className="sr-only">Toggle Panel</span>
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom" className="bg-primary text-primary-foreground font-semibold">
+                <TooltipContent side="bottom" className="bg-background/80 backdrop-blur-xl border-border/50 text-foreground font-semibold shadow-2xl">
                   <p>Discover Coffee Shops</p>
                 </TooltipContent>
               </Tooltip>
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 907ab79..71d6112 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -52,7 +52,6 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )