Merge remote-tracking branch 'origin' into feature/tracking

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -15,6 +15,7 @@ import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
+import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { debounce } from "@/utils/debounce"
 
 import FilterAndSortModal from "../../FilterAndSortModal"
@@ -41,13 +42,17 @@ export default function SelectHotelContent({
 
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
-  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
-  const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
 
+  const { showBackToTop, scrollToTop } = useScrollToTop({
+    threshold: 490,
+    elementRef: listingContainerRef,
+  })
+
   const coordinates = useMemo(
     () =>
       isAboveMobile
@@ -66,28 +71,6 @@ export default function SelectHotelContent({
     }
   }, [activeHotelCard, activeHotelPin])
 
-  useEffect(() => {
-    const hotelListingElement = document.querySelector(
-      `.${styles.listingContainer}`
-    )
-    if (!hotelListingElement) return
-
-    const handleScroll = () => {
-      const hasScrolledPast = hotelListingElement.scrollTop > 490
-      setShowBackToTop(hasScrolledPast)
-    }
-
-    hotelListingElement.addEventListener("scroll", handleScroll)
-    return () => hotelListingElement.removeEventListener("scroll", handleScroll)
-  }, [])
-
-  function scrollToTop() {
-    const hotelListingElement = document.querySelector(
-      `.${styles.listingContainer}`
-    )
-    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
   const filteredHotelPins = useMemo(
     () =>
       hotelPins.filter((hotel) =>
@@ -102,7 +85,7 @@ export default function SelectHotelContent({
     const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
     setVisibleHotels(visibleHotels)
     setTimeout(() => {
-      setShowSkeleton(true)
+      setShowSkeleton(false)
     }, SKELETON_LOAD_DELAY)
   }, [hotels, filteredHotelPins, map])
 
@@ -116,7 +99,7 @@ export default function SelectHotelContent({
     () =>
       debounce(() => {
         if (!map) return
-        setShowSkeleton(false)
+        setShowSkeleton(true)
         getHotelCards()
       }, 100),
     [map, getHotelCards]
@@ -155,11 +138,12 @@ export default function SelectHotelContent({
           </Button>
           <FilterAndSortModal filters={filterList} />
         </div>
+
         {showSkeleton ? (
-          <>
+          <div className={styles.skeletonContainer}>
             <RoomCardSkeleton />
             <RoomCardSkeleton />
-          </>
+          </div>
         ) : (
           <HotelListing hotels={visibleHotels} />
         )}

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -48,4 +48,10 @@
     padding: 0 0 var(--Spacing-x1);
     position: static;
   }
+
+  .skeletonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--Spacing-x2);
+  }
 }