Fix: Merging issues

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

@@ -42,7 +42,7 @@ export default function SelectHotelContent({
 
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
-  const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
@@ -85,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])
 
@@ -99,7 +99,7 @@ export default function SelectHotelContent({
     () =>
       debounce(() => {
         if (!map) return
-        setShowSkeleton(false)
+        setShowSkeleton(true)
         getHotelCards()
       }, 100),
     [map, getHotelCards]
@@ -138,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);
+  }
 }