Refactor booking widget skeleton

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,5 +1,4 @@
 "use client"
-import { useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -9,11 +8,12 @@ import DatePicker from "@/components/DatePicker"
 import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
 import GuestsRoomsProvider from "@/components/GuestsRoomsPicker/Provider/GuestsRoomsProvider"
 import { SearchIcon } from "@/components/Icons"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import Search from "./Search"
-import Voucher from "./Voucher"
+import Search, { SearchSkeleton } from "./Search"
+import Voucher, { VoucherSkeleton } from "./Voucher"
 
 import styles from "./formContent.module.css"
 
@@ -90,3 +90,53 @@ export default function FormContent({
     </>
   )
 }
+
+export function BookingWidgetFormContentSkeleton() {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.input}>
+      <div className={styles.inputContainer}>
+        <div className={styles.where}>
+          <SearchSkeleton />
+        </div>
+        <div className={styles.when}>
+          <Caption color="red" type="bold">
+            {intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
+          </Caption>
+          <SkeletonShimmer />
+        </div>
+        <div className={styles.rooms}>
+          <Caption color="red" type="bold" asChild>
+            <span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
+          </Caption>
+          <SkeletonShimmer />
+        </div>
+      </div>
+      <div className={styles.voucherContainer}>
+        <VoucherSkeleton />
+      </div>
+      <div className={styles.buttonContainer}>
+        <Button
+          className={styles.button}
+          intent="primary"
+          theme="base"
+          type="submit"
+          disabled
+        >
+          <Caption
+            color="white"
+            type="bold"
+            className={styles.buttonText}
+            asChild
+          >
+            <span>{intl.formatMessage({ id: "Search" })}</span>
+          </Caption>
+          <span className={styles.icon}>
+            <SearchIcon color="white" width={28} height={28} />
+          </span>
+        </Button>
+      </div>
+    </div>
+  )
+}

components/Forms/BookingWidget/index.tsx

@@ -6,7 +6,7 @@ import { selectHotel, selectRate } from "@/constants/routes/hotelReservation"
 
 import useLang from "@/hooks/useLang"
 
-import FormContent from "./FormContent"
+import FormContent, { BookingWidgetFormContentSkeleton } from "./FormContent"
 import { bookingWidgetVariants } from "./variants"
 
 import styles from "./form.module.css"
@@ -69,3 +69,17 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
     </section>
   )
 }
+
+export function BookingWidgetFormSkeleton() {
+  const classNames = bookingWidgetVariants({
+    type: "full",
+  })
+
+  return (
+    <section className={classNames}>
+      <form className={styles.form}>
+        <BookingWidgetFormContentSkeleton />
+      </form>
+    </section>
+  )
+}