From e1bc7c25e067cac3efef55225883d11b7bdf25dd Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 12 Dec 2024 20:30:41 +0100
Subject: [PATCH] fix(SW-1168) Fixed comments for map

---
 .../SelectHotelMapContent/index.tsx           | 25 +++++++++++++------
 .../SelectHotel/SelectHotelMap/index.tsx      |  4 +--
 components/Maps/InteractiveMap/index.tsx      |  4 +--
 .../hotelPage/map/interactiveMap.ts           |  4 +--
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index f91165ea7..ed496c4cf 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -1,3 +1,4 @@
+"use client"
 import { useMap } from "@vis.gl/react-google-maps"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
@@ -25,6 +26,8 @@ import styles from "./selectHotelMapContent.module.css"
 import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
 
+const SKELETON_LOAD_DELAY = 750
+
 export default function SelectHotelContent({
   hotelPins,
   cityCoordinates,
@@ -39,7 +42,7 @@ export default function SelectHotelContent({
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
-  const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false)
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
@@ -99,15 +102,21 @@ export default function SelectHotelContent({
     const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
     setVisibleHotels(visibleHotels)
     setTimeout(() => {
-      setIsMapLoaded(true)
-    }, 750)
+      setShowSkeleton(true)
+    }, SKELETON_LOAD_DELAY)
   }, [hotels, filteredHotelPins, map])
 
+  /**
+   * Updates visible hotels when map viewport changes (zoom/pan)
+   * - Debounces updates to prevent excessive re-renders during map interaction
+   * - Shows loading skeleton while map tiles load
+   * - Triggers on: initial load, zoom, pan, and tile loading completion
+   */
   const debouncedUpdateHotelCards = useMemo(
     () =>
       debounce(() => {
         if (!map) return
-        setIsMapLoaded(false)
+        setShowSkeleton(false)
         getHotelCards()
       }, 100),
     [map, getHotelCards]
@@ -146,13 +155,13 @@ export default function SelectHotelContent({
           </Button>
           <FilterAndSortModal filters={filterList} />
         </div>
-        {isMapLoaded ? (
-          <HotelListing hotels={visibleHotels} />
-        ) : (
+        {showSkeleton ? (
           <>
             <RoomCardSkeleton />
             <RoomCardSkeleton />
           </>
+        ) : (
+          <HotelListing hotels={visibleHotels} />
         )}
         {showBackToTop && (
           <BackToTopButton position="left" onClick={scrollToTop} />
@@ -163,7 +172,7 @@ export default function SelectHotelContent({
         coordinates={coordinates}
         hotelPins={filteredHotelPins}
         mapId={mapId}
-        onMapLoad={debouncedUpdateHotelCards}
+        onTilesLoaded={debouncedUpdateHotelCards}
       />
     </div>
   )
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
index a598050b1..a5b67d704 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -2,7 +2,7 @@
 
 import { APIProvider } from "@vis.gl/react-google-maps"
 
-import SelectHotelContent from "./SelectHotelMapContent"
+import SelectHotelMapContent from "./SelectHotelMapContent"
 
 import type { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
 
@@ -16,7 +16,7 @@ export default function SelectHotelMap({
 }: SelectHotelMapProps) {
   return (
     <APIProvider apiKey={apiKey}>
-      <SelectHotelContent
+      <SelectHotelMapContent
         hotelPins={hotelPins}
         cityCoordinates={cityCoordinates}
         mapId={mapId}
diff --git a/components/Maps/InteractiveMap/index.tsx b/components/Maps/InteractiveMap/index.tsx
index 4e7f142c1..861961e4a 100644
--- a/components/Maps/InteractiveMap/index.tsx
+++ b/components/Maps/InteractiveMap/index.tsx
@@ -19,7 +19,7 @@ export default function InteractiveMap({
   hotelPins,
   mapId,
   closeButton,
-  onMapLoad,
+  onTilesLoaded,
   onActivePoiChange,
 }: InteractiveMapProps) {
   const intl = useIntl()
@@ -48,7 +48,7 @@ export default function InteractiveMap({
 
   return (
     <div className={styles.mapContainer}>
-      <Map {...mapOptions} onTilesLoaded={onMapLoad}>
+      <Map {...mapOptions} onTilesLoaded={onTilesLoaded}>
         {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
         {pointsOfInterest && (
           <HotelMapContent
diff --git a/types/components/hotelPage/map/interactiveMap.ts b/types/components/hotelPage/map/interactiveMap.ts
index 1314baa87..2c337da43 100644
--- a/types/components/hotelPage/map/interactiveMap.ts
+++ b/types/components/hotelPage/map/interactiveMap.ts
@@ -1,4 +1,4 @@
-import { ReactElement } from "react"
+import type { ReactElement } from "react"
 
 import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
 import type { Coordinates } from "@/types/components/maps/coordinates"
@@ -11,6 +11,6 @@ export interface InteractiveMapProps {
   hotelPins?: HotelPin[]
   mapId: string
   closeButton: ReactElement
-  onMapLoad?: () => void
+  onTilesLoaded?: () => void
   onActivePoiChange?: (poi: PointOfInterest["name"] | null) => void
 }