Skeleton loader for booking widget on desktop

components/BookingWidget/BookingWidgetSkeleton.tsx

@@ -0,0 +1,90 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { SearchIcon } from "@/components/Icons"
+
+import { SearchSkeleton } from "../Forms/BookingWidget/FormContent/Search"
+import { VoucherSkeleton } from "../Forms/BookingWidget/FormContent/Voucher"
+import { bookingWidgetVariants } from "../Forms/BookingWidget/variants"
+import SkeletonShimmer from "../SkeletonShimmer"
+import Button from "../TempDesignSystem/Button"
+import Caption from "../TempDesignSystem/Text/Caption"
+
+import formStyles from "../Forms/BookingWidget/form.module.css"
+import formContentStyles from "../Forms/BookingWidget/FormContent/formContent.module.css"
+import widgetStyles from "./bookingWidget.module.css"
+
+export default function BookingWidgetSkeleton() {
+  const intl = useIntl()
+
+  const classNames = bookingWidgetVariants({
+    type: "full",
+  })
+
+  return (
+    <section className={widgetStyles.containerDesktop}>
+      <section className={classNames}>
+        <form className={formStyles.form}>
+          <div className={formContentStyles.input}>
+            <div className={formContentStyles.inputContainer}>
+              <div className={formContentStyles.where}>
+                <SearchSkeleton />
+              </div>
+              <div className={formContentStyles.when}>
+                <Caption color="red" type="bold">
+                  {intl.formatMessage(
+                    { id: "booking.nights" },
+                    { totalNights: 0 }
+                  )}
+                </Caption>
+                <SkeletonShimmer />
+              </div>
+              <div className={formContentStyles.rooms}>
+                <Caption color="red" type="bold" asChild>
+                  <span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
+                </Caption>
+                <SkeletonShimmer />
+              </div>
+            </div>
+            <div className={formContentStyles.voucherContainer}>
+              <VoucherSkeleton />
+            </div>
+            <div className={formContentStyles.buttonContainer}>
+              <Button
+                className={formContentStyles.button}
+                intent="primary"
+                theme="base"
+                type="submit"
+                disabled
+              >
+                <Caption
+                  color="white"
+                  type="bold"
+                  className={formContentStyles.buttonText}
+                  asChild
+                >
+                  <span>{intl.formatMessage({ id: "Search" })}</span>
+                </Caption>
+                <span className={formContentStyles.icon}>
+                  <SearchIcon color="white" width={28} height={28} />
+                </span>
+              </Button>
+            </div>
+          </div>
+        </form>
+      </section>
+      {/* <section className={styles.containerMobile} data-open={isOpen}>
+     <button
+       className={styles.close}
+       onClick={closeMobileSearch}
+       type="button"
+     >
+       <CloseLargeIcon />
+     </button>
+     <Form locations={locations} type={type} />
+   </section>
+   <div className={styles.backdrop} onClick={closeMobileSearch} />
+   <MobileToggleButton openMobileSearch={openMobileSearch} /> */}
+    </section>
+  )
+}