fix map interaction regressions (#51)

* fix map interaction regressions

* address copilot review feedback

* address latest copilot feedback

Author: dnywh

messages/de.json

@@ -385,6 +385,7 @@
     "searchError": "Etwas ist schiefgelaufen. Erneut versuchen?",
     "searchNoResults": "Keine Ergebnisse. Tippe weiter oder verfeinere deine Suche",
     "returnToListing": "Zurück zum Eintrag",
+    "loadingListing": "Eintrag wird geladen…",
     "loadingPins": "Wird geladen…",
     "didYouKnow": "Wusstest du schon?",
     "steps": {

messages/en.json

@@ -385,6 +385,7 @@
     "searchError": "Something went wrong. Try again?",
     "searchNoResults": "No results. Keep typing or refine your search",
     "returnToListing": "Return to listing",
+    "loadingListing": "Loading listing…",
     "loadingPins": "Loading…",
     "didYouKnow": "Did you know?",
     "steps": {

messages/es.json

@@ -385,6 +385,7 @@
     "searchError": "Algo salió mal. ¿Intentarlo de nuevo?",
     "searchNoResults": "Sin resultados. Sigue escribiendo o ajusta tu búsqueda",
     "returnToListing": "Volver al anuncio",
+    "loadingListing": "Cargando anuncio…",
     "loadingPins": "Cargando…",
     "didYouKnow": "¿Sabías que?",
     "steps": {

src/contexts/UnreadMessagesContext.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext, useState, useEffect } from "react";
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
 import { createClient } from "@/utils/supabase/client";
 
 const UnreadMessagesContext = createContext();
@@ -9,7 +9,7 @@ export function UnreadMessagesProvider({ children }) {
   const [unreadCount, setUnreadCount] = useState(0);
   const [threadReadStatus, setThreadReadStatus] = useState({});
   const [hasViewedChats, setHasViewedChats] = useState(false);
-  const supabase = createClient();
+  const supabase = useMemo(() => createClient(), []);
 
   // Check for unread messages on mount
   useEffect(() => {
@@ -84,7 +84,7 @@ export function UnreadMessagesProvider({ children }) {
     return () => {
       subscription.unsubscribe();
     };
-  }, []);
+  }, [supabase]);
 
   // Real-time subscription for new messages
   useEffect(() => {

src/features/map/components/MapListingDrawerPanel.tsx

@@ -2,7 +2,7 @@
 
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { Drawer } from "vaul";
-import { styled } from "@pigment-css/react";
+import { keyframes, styled } from "@pigment-css/react";
 import { useTranslations } from "next-intl";
 import type { User } from "@supabase/supabase-js";
 
@@ -20,6 +20,7 @@ import { SIDEBAR_WIDTH } from "../lib/mapUtils";
 type MapListingDrawerPanelProps = {
   user: User | null;
   selectedListing: SelectedListing | null;
+  isSelectedListingLoading: boolean;
   isDesktop: boolean;
   hasTouch: boolean;
   isDrawerHeaderShown: boolean;
@@ -193,9 +194,42 @@ const NoListingFound = styled("div")(({ theme }) => ({
   },
 }));
 
+const LoadingState = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem",
+  padding: "0 1rem",
+});
+
+const mapDrawerPulse = keyframes({
+  "0%": { opacity: 0.55 },
+  "50%": { opacity: 1 },
+  "100%": { opacity: 0.55 },
+});
+
+const SkeletonBlock = styled("div")(({ theme }) => ({
+  borderRadius: theme.corners.base,
+  background: theme.colors.background.slight,
+  opacity: 0.85,
+  animation: `${mapDrawerPulse} 1.2s ease-in-out infinite`,
+}));
+
+const SkeletonHeader = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem",
+});
+
+const SkeletonText = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+});
+
 export default function MapListingDrawerPanel({
   user,
   selectedListing,
+  isSelectedListingLoading,
   isDesktop,
   hasTouch,
   isDrawerHeaderShown,
@@ -208,9 +242,10 @@ export default function MapListingDrawerPanel({
   const t = useTranslations();
 
   const showErrorPanel = isListingError(selectedListing);
-  const listingForDisplay = isListingError(selectedListing)
-    ? null
-    : selectedListing;
+  const listingForDisplay =
+    isSelectedListingLoading || isListingError(selectedListing)
+      ? null
+      : selectedListing;
 
   return (
     <Drawer.Portal>
@@ -239,16 +274,25 @@ export default function MapListingDrawerPanel({
             }}
           >
             <StyledHeaderText>
-              <h3 style={{ fontSize: "0.85rem" }}>
-                {listingForDisplay
-                  ? getListingDisplayName(listingForDisplay, user)
-                  : ""}
-              </h3>
-              <p>
-                {listingForDisplay
-                  ? getListingDisplayType(listingForDisplay)
-                  : ""}
-              </p>
+              {isSelectedListingLoading ? (
+                <SkeletonHeader>
+                  <SkeletonBlock style={{ height: "0.85rem", width: "65%" }} />
+                  <SkeletonBlock style={{ height: "0.8rem", width: "40%" }} />
+                </SkeletonHeader>
+              ) : (
+                <>
+                  <h3 style={{ fontSize: "0.85rem" }}>
+                    {listingForDisplay
+                      ? getListingDisplayName(listingForDisplay, user)
+                      : ""}
+                  </h3>
+                  <p>
+                    {listingForDisplay
+                      ? getListingDisplayType(listingForDisplay)
+                      : ""}
+                  </p>
+                </>
+              )}
             </StyledHeaderText>
           </StyledDrawerHeaderInner>
 
@@ -276,7 +320,20 @@ export default function MapListingDrawerPanel({
         </StyledDrawerHeader>
 
         <StyledDrawerInner>
-          {showErrorPanel ? (
+          {isSelectedListingLoading ? (
+            <LoadingState aria-busy={true}>
+              <p>{t("Map.loadingListing")}</p>
+              <SkeletonBlock style={{ height: "3rem", width: "100%" }} />
+              <SkeletonText>
+                <SkeletonBlock style={{ height: "1rem", width: "45%" }} />
+                <SkeletonBlock style={{ height: "4.5rem", width: "100%" }} />
+                <SkeletonBlock style={{ height: "1rem", width: "35%" }} />
+                <SkeletonBlock style={{ height: "7rem", width: "100%" }} />
+                <SkeletonBlock style={{ height: "1rem", width: "30%" }} />
+                <SkeletonBlock style={{ height: "5rem", width: "100%" }} />
+              </SkeletonText>
+            </LoadingState>
+          ) : showErrorPanel ? (
             <NoListingFound>
               <header>
                 <h2>{t("Map.emptyTitle")}</h2>

src/features/map/components/MapPageClient.tsx

@@ -57,7 +57,8 @@ export default function MapPageClient({
     selectedListing,
     selectedListingId,
     isListingSelected,
-    selectListingById,
+    isSelectedListingLoading,
+    selectListing,
     closeListing,
   } = useMapListingUrl({ user, initialListingSlug, initialListing });
 
@@ -72,38 +73,45 @@ export default function MapPageClient({
     isFullSnap,
     isPartialSnap,
     isDrawerHeaderShown,
+    resetDrawer,
     handleSnapChange,
   } = useMapDrawerState({ isDesktop, listingSlug, isListingSelected });
 
   const handleMarkerClick = useCallback(
     (listing: ListingMarker) => {
       if (listing.id === selectedListingId && isListingSelected) return;
 
-      // Optimistic pin grow + single fetch (selectListingById sets the
-      // optimistic id synchronously, fetches by id, then pushes the URL).
-      void selectListingById(listing.id);
+      resetDrawer();
+      selectListing(listing);
     },
-    [isListingSelected, selectListingById, selectedListingId]
+    [isListingSelected, resetDrawer, selectListing, selectedListingId]
   );
 
   const handleMapClick = useCallback(() => {
     if (isListingSelected) {
+      resetDrawer();
       closeListing();
     }
-  }, [closeListing, isListingSelected]);
+  }, [closeListing, isListingSelected, resetDrawer]);
 
   const handleDrawerOpenChange = useCallback(
     (open: boolean) => {
       // Drawer-driven close (e.g. escape key on desktop) should also update
       // the URL. We only act on the close transition — `open === true` is
       // already reflected by `isListingSelected` from the URL.
       if (!open && isListingSelected) {
+        resetDrawer();
         closeListing();
       }
     },
-    [closeListing, isListingSelected]
+    [closeListing, isListingSelected, resetDrawer]
   );
 
+  const handlePanelClose = useCallback(() => {
+    resetDrawer();
+    closeListing();
+  }, [closeListing, resetDrawer]);
+
   return (
     <StyledMapPage>
       <StyledMapWrapper>
@@ -120,6 +128,7 @@ export default function MapPageClient({
             selectedListing={selectedListing}
             selectedListingId={selectedListingId}
             listingSlug={listingSlug}
+            isListingSelected={isListingSelected}
             initialCoordinates={initialCoordinates}
             onMapClick={handleMapClick}
             onMarkerClick={handleMarkerClick}
@@ -131,13 +140,14 @@ export default function MapPageClient({
           <MapListingDrawerPanel
             user={user}
             selectedListing={selectedListing}
+            isSelectedListingLoading={isSelectedListingLoading}
             isDesktop={isDesktop}
             hasTouch={hasTouch}
             isDrawerHeaderShown={isDrawerHeaderShown}
             isFullSnap={isFullSnap}
             isPartialSnap={isPartialSnap}
             onToggleSnap={handleSnapChange}
-            onClose={closeListing}
+            onClose={handlePanelClose}
             drawerContentRef={drawerContentRef}
           />
         </Drawer.Root>

src/features/map/components/MapView.tsx

@@ -45,6 +45,7 @@ type MapViewProps = {
   selectedListing: SelectedListing | null;
   selectedListingId: number | null;
   listingSlug: string | null;
+  isListingSelected: boolean;
   initialCoordinates: (ListingCoordinates & { zoom: number }) | null;
   onMapClick: () => void;
   onMarkerClick: (listing: ListingMarker) => void;
@@ -76,8 +77,9 @@ const ReturnToListingButton = styled(Button)({
 const LoadingChip = styled("div")(({ theme }) => ({
   position: "absolute",
   top: "0.75rem",
-  right: "0.75rem",
-  zIndex: 1,
+  left: "50%",
+  transform: "translateX(-50%)",
+  zIndex: 2,
   padding: "0.25rem 0.75rem",
   borderRadius: "999px",
   background: theme.colors.background.top,
@@ -155,6 +157,7 @@ export default function MapView({
   selectedListing,
   selectedListingId,
   listingSlug,
+  isListingSelected,
   initialCoordinates,
   onMapClick,
   onMarkerClick,
@@ -222,11 +225,11 @@ export default function MapView({
 
   const handleMapClickInternal = useCallback(
     (_event: MapLayerMouseEvent) => {
-      if (selectedListingId !== null || listingSlug) {
+      if (selectedListingId !== null || isListingSelected || listingSlug) {
         onMapClick();
       }
     },
-    [listingSlug, onMapClick, selectedListingId]
+    [isListingSelected, listingSlug, onMapClick, selectedListingId]
   );
 
   const handleSearchPick = useCallback(
@@ -245,7 +248,7 @@ export default function MapView({
   );
 
   const showReturnButton = Boolean(
-    selectedListing && listingSlug && !isSelectedInView
+    selectedListing && isListingSelected && !isSelectedInView
   );
 
   return (

src/features/map/hooks/useMapDrawerState.ts

@@ -19,6 +19,7 @@ type UseMapDrawerStateResult = {
   isFullSnap: boolean;
   isPartialSnap: boolean;
   isDrawerHeaderShown: boolean;
+  resetDrawer: () => void;
   handleSnapChange: () => void;
 };
 
@@ -48,6 +49,15 @@ export function useMapDrawerState({
   const isFullSnap = snap === SNAP_POINTS.full;
   const isPartialSnap = snap === SNAP_POINTS.partial;
 
+  const resetDrawer = useCallback(() => {
+    document.documentElement.classList.remove("drawer-fully-open");
+    setSnap(SNAP_POINTS.partial);
+    setIsDrawerHeaderShown(false);
+    if (drawerContentRef.current) {
+      drawerContentRef.current.scrollTop = 0;
+    }
+  }, []);
+
   // Snap to full on desktop. On mobile we stay at the partial snap until the
   // user explicitly expands or a new listing is opened.
   useEffect(() => {
@@ -79,17 +89,12 @@ export function useMapDrawerState({
   // changes (including browser back/forward).
   useEffect(() => {
     if (!listingSlug) {
-      document.documentElement.classList.remove("drawer-fully-open");
-      setSnap(SNAP_POINTS.partial);
+      resetDrawer();
       return;
     }
 
-    setSnap(SNAP_POINTS.partial);
-    setIsDrawerHeaderShown(false);
-    if (drawerContentRef.current) {
-      drawerContentRef.current.scrollTop = 0;
-    }
-  }, [listingSlug]);
+    resetDrawer();
+  }, [listingSlug, resetDrawer]);
 
   // Mobile: we can attach the scroll handler directly when the drawer is
   // fully snapped because the drawer content is the scroll container.
@@ -174,6 +179,7 @@ export function useMapDrawerState({
     isFullSnap,
     isPartialSnap,
     isDrawerHeaderShown,
+    resetDrawer,
     handleSnapChange,
   };
 }