From 185dc3e8ccfb60c378cb411df4fe64a63bd9751a Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 10 Jan 2025 14:52:59 +0100
Subject: [PATCH] fix(SW-1111) Fix issues with map

---
 .../SelectHotel/FilterAndSortModal/index.tsx          | 11 ++++++++++-
 .../SelectHotelMap/SelectHotelMapContent/index.tsx    |  7 +++++--
 components/MapContainer/index.tsx                     |  4 ++--
 components/MapContainer/mapModal.module.css           |  1 +
 .../selectHotel/filterAndSortModal.ts                 |  3 ++-
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
index f1d3d9751..a2dceaa33 100644
--- a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
+++ b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
@@ -36,6 +36,7 @@ import {
 
 export default function FilterAndSortModal({
   filters,
+  setShowSkeleton,
 }: FilterAndSortModalProps) {
   const intl = useIntl()
   useInitializeFiltersFromUrl()
@@ -65,6 +66,9 @@ export default function FilterAndSortModal({
 
   const handleApplyFiltersAndSorting = useCallback(
     (close: () => void) => {
+      if (setShowSkeleton) {
+        setShowSkeleton(true)
+      }
       if (sort === searchParams.get("sort")) {
         close()
       }
@@ -78,8 +82,13 @@ export default function FilterAndSortModal({
         `${pathname}?${newSearchParams.toString()}`
       )
       close()
+      if (setShowSkeleton) {
+        setTimeout(() => {
+          setShowSkeleton(false)
+        }, 500)
+      }
     },
-    [pathname, searchParams, sort]
+    [pathname, searchParams, sort, setShowSkeleton]
   )
 
   return (
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index 1f6a9c487..5f20dd5e4 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -115,7 +115,7 @@ export default function SelectHotelContent({
       className={styles.closeButton}
       asChild
     >
-      <Link href={selectHotel(lang)} keepSearchParams>
+      <Link href={selectHotel(lang)} keepSearchParams prefetch>
         <CloseIcon color="burgundy" />
         {intl.formatMessage({ id: "Close the map" })}
       </Link>
@@ -138,7 +138,10 @@ export default function SelectHotelContent({
               <CloseLargeIcon />
             </Link>
           </Button>
-          <FilterAndSortModal filters={filterList} />
+          <FilterAndSortModal
+            filters={filterList}
+            setShowSkeleton={setShowSkeleton}
+          />
         </div>
 
         {showSkeleton ? (
diff --git a/components/MapContainer/index.tsx b/components/MapContainer/index.tsx
index 557a48737..59ab162ee 100644
--- a/components/MapContainer/index.tsx
+++ b/components/MapContainer/index.tsx
@@ -7,8 +7,8 @@ import { debounce } from "@/utils/debounce"
 import styles from "./mapModal.module.css"
 
 export function MapContainer({ children }: { children: React.ReactNode }) {
-  const [mapHeight, setMapHeight] = useState("0px")
-  const [mapTop, setMapTop] = useState("0px")
+  const [mapHeight, setMapHeight] = useState("")
+  const [mapTop, setMapTop] = useState("")
   const [mapZIndex, setMapZIndex] = useState(0)
   const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
 
diff --git a/components/MapContainer/mapModal.module.css b/components/MapContainer/mapModal.module.css
index e0a37bd92..e4227b45b 100644
--- a/components/MapContainer/mapModal.module.css
+++ b/components/MapContainer/mapModal.module.css
@@ -18,4 +18,5 @@
   left: 0;
   height: 100vh;
   right: 0;
+  bottom: 0;
 }
diff --git a/types/components/hotelReservation/selectHotel/filterAndSortModal.ts b/types/components/hotelReservation/selectHotel/filterAndSortModal.ts
index 06088c78b..a36cc23eb 100644
--- a/types/components/hotelReservation/selectHotel/filterAndSortModal.ts
+++ b/types/components/hotelReservation/selectHotel/filterAndSortModal.ts
@@ -1,5 +1,6 @@
-import { CategorizedFilters } from "./hotelFilters"
+import type { CategorizedFilters } from "./hotelFilters"
 
 export type FilterAndSortModalProps = {
   filters: CategorizedFilters
+  setShowSkeleton?: (showSkeleton: boolean) => void
 }