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 > - + {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 }