diff --git a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
index c292253b1..4f8e6bcaf 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
>
-
+
{intl.formatMessage({ id: "Close the map" })}
@@ -138,7 +138,10 @@ export default function SelectHotelContent({
-
+
{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
}