refactor: Streamline map loading and drawer rendering, remove tooltip arrow, and update Navbar tooltip styling with a pulsing indicator.

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 */}
+      {/* Right Drawer */}
-      {isMapLoaded && (
+      <Drawer
-        <Drawer
+        shop={selectedShop}
-          shop={selectedShop}
+        shops={COFFEE_SHOPS}
-          shops={COFFEE_SHOPS}
+        onSelect={setSelectedShop}
-          onSelect={setSelectedShop}
+        onClose={() => setSelectedShop(null)}
-          onClose={() => setSelectedShop(null)}
+        isOpen={isDiscoveryOpen}
-          isOpen={isDiscoveryOpen}
+      />
-        />
-      )}
       <WelcomeModal />
     </main>
   );

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) {
+// Move dynamic import outside component to prevent re-imports
-    const [isLoading, setIsLoading] = useState(true);
+const Map = dynamic(() => import("./Map"), {
-
+    ssr: false,
-    const Map = dynamic(() => import("./Map"), {
+    loading: () => (
-        ssr: false,
+        <div className="w-full h-full relative bg-background">
-        loading: () => (
+            <Skeleton className="w-full h-full absolute inset-0" />
-            <div className="w-full h-full relative bg-background">
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
-                <Skeleton className="w-full h-full absolute inset-0" />
+                <Coffee className="h-16 w-16 text-muted-foreground/50" />
-                <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
+                <Loader2 className="h-8 w-8 text-primary animate-spin" />
-                    <Coffee className="h-16 w-16 text-muted-foreground/50" />
-                    <Loader2 className="h-8 w-8 text-primary animate-spin" />
-                </div>
             </div>
-        ),
+        </div>
-    });
+    ),
-
+});
-    useEffect(() => {
-        // Small delay to ensure smooth transition
-        const timer = setTimeout(() => setIsLoading(false), 100);
-        return () => clearTimeout(timer);
-    }, []);
 
+export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
     return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} />;
 }

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>

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>
   )