Skeleton loader for booking widget on desktop

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -11,6 +11,7 @@ import {
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Input from "../Input"
@@ -203,3 +204,18 @@ export default function Search({ locations }: SearchProps) {
     </Downshift>
   )
 }
+
+export function SearchSkeleton() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.label}>
+        <Caption type="bold" color="red" asChild>
+          <span>Where to</span>
+        </Caption>
+      </div>
+      <div className={styles.input}>
+        <SkeletonShimmer />
+      </div>
+    </div>
+  )
+}

components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -78,3 +79,54 @@ export default function Voucher() {
     </div>
   )
 }
+
+export function VoucherSkeleton() {
+  const intl = useIntl()
+
+  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
+  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
+  const addVouchers = intl.formatMessage({ id: "Add code" })
+  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
+  const reward = intl.formatMessage({ id: "Book reward night" })
+
+  const form = useForm()
+
+  return (
+    <FormProvider {...form}>
+      <div className={styles.optionsContainer}>
+        <div className={styles.vouchers}>
+          <label>
+            <Caption color="disabled" type="bold" asChild>
+              <span>{vouchers}</span>
+            </Caption>
+            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
+          </label>
+          <Input type="text" placeholder={addVouchers} disabled />
+        </div>
+        <div className={styles.options}>
+          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
+            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{useVouchers}</span>
+              </Caption>
+            </Checkbox>
+          </div>
+          <div className={styles.option}>
+            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{bonus}</span>
+              </Caption>
+            </Checkbox>
+          </div>
+          <div className={styles.option}>
+            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{reward}</span>
+              </Caption>
+            </Checkbox>
+          </div>
+        </div>
+      </div>
+    </FormProvider>
+  )
+}