diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/loading.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/loading.tsx
deleted file mode 100644
index fefdc7682..000000000
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
-
-export default function Loading() {
-  return <SelectHotelMapContainerSkeleton />
-}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
index 47af6c424..29caabded 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -44,12 +44,17 @@ export default async function SelectHotelMapPage({
   return (
     <div className={styles.main}>
       <MapContainer>
-        <SelectHotelMapContainer
-          city={city}
-          searchParams={searchParams}
-          adultsInRoom={adultsInRoom}
-          childrenInRoom={childrenInRoom}
-        />
+        <Suspense
+          key={city.name}
+          fallback={<SelectHotelMapContainerSkeleton />}
+        >
+          <SelectHotelMapContainer
+            city={city}
+            searchParams={searchParams}
+            adultsInRoom={adultsInRoom}
+            childrenInRoom={childrenInRoom}
+          />
+        </Suspense>
       </MapContainer>
     </div>
   )
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
index 75821477f..e4ec6b7d0 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
@@ -8,7 +8,7 @@ type Props = {
   count?: number
 }
 
-export async function SelectHotelMapContainerSkeleton({ count = 2 }: Props) {
+export function SelectHotelMapContainerSkeleton({ count = 2 }: Props) {
   return (
     <div className={styles.container}>
       <div className={styles.listingContainer}>
diff --git a/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx b/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
index 8fb2b7a3b..0a6913dec 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
@@ -8,7 +8,7 @@ type Props = {
   count?: number
 }
 
-export async function SelectHotelSkeleton({ count = 4 }: Props) {
+export function SelectHotelSkeleton({ count = 4 }: Props) {
   return (
     <div className={styles.skeletonContainer}>
       <header className={styles.header}>