feat: break apart loading of room availability and hotel card

feat: add skeletons

components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.module.css

@@ -0,0 +1,21 @@
+.container {
+  padding: var(--Spacing-x2);
+}
+
+.filterContainer {
+  height: 38px;
+}
+
+.skeletonContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  /* used to hide overflowing rows */
+  grid-template-rows: auto;
+  grid-auto-rows: 0;
+  overflow: hidden;
+
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: var(--Spacing-x2);
+}

components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx

@@ -0,0 +1,24 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+
+import { RoomCardSkeleton } from "../RoomSelection/RoomCard/RoomCardSkeleton"
+
+import styles from "./RoomsContainerSkeleton.module.css"
+
+type Props = {
+  count?: number
+}
+
+export async function RoomsContainerSkeleton({ count = 4 }: Props) {
+  const intl = await getIntl()
+  return (
+    <div className={styles.container}>
+      <div className={styles.filterContainer}></div>
+      <div className={styles.skeletonContainer}>
+        {Array.from({ length: count }).map((_, index) => (
+          <RoomCardSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  )
+}