Merged in fix/SW-1111-r2 (pull request #1169)

fix(SW-1111) Fix issues with map

Approved-by: Niclas Edenvin

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 (

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 ? (

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 [mapHeight, setMapHeight] = useState("")
-  const [mapTop, setMapTop] = useState("0px")
+  const [mapTop, setMapTop] = useState("")
   const [mapZIndex, setMapZIndex] = useState(0)
   const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
 

components/MapContainer/mapModal.module.css

@@ -18,4 +18,5 @@
   left: 0;
   height: 100vh;
   right: 0;
+  bottom: 0;
 }

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
 }