fix(SW-1143): Added loading/skeleton to select hotel

components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx

@@ -0,0 +1,42 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import { HotelCardSkeleton } from "../HotelCard/HotelCardSkeleton"
+
+import styles from "./selectHotel.module.css"
+
+type Props = {
+  count?: number
+}
+
+export async function SelectHotelSkeleton({ count = 4 }: Props) {
+  return (
+    <div className={styles.skeletonContainer}>
+      <header className={styles.header}>
+        <SkeletonShimmer height={"25px"} />
+        <div className={styles.title}>
+          <div className={styles.cityInformation}>
+            <SkeletonShimmer height={"25px"} width={"200px"} />
+          </div>
+          <div className={styles.sorter}>
+            <SkeletonShimmer height={"60px"} />
+          </div>
+        </div>
+      </header>
+      <main className={styles.main}>
+        <div className={styles.sideBar}>
+          <div className={styles.sideBarItem}>
+            <SkeletonShimmer height={"280px"} width={"340px"} />
+          </div>
+          <div className={styles.sideBarItem}>
+            <SkeletonShimmer height={"400px"} width={"340px"} />
+          </div>
+        </div>
+        <div className={styles.hotelList}>
+          {Array.from({ length: count }).map((_, index) => (
+            <HotelCardSkeleton key={index} />
+          ))}
+        </div>
+      </main>
+    </div>
+  )
+}