Refactor booking widget skeleton

components/BookingWidget/Client.tsx

@@ -6,14 +6,18 @@ import { FormProvider, useForm } from "react-hook-form"
 import { dt } from "@/lib/dt"
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
-import Form from "@/components/Forms/BookingWidget"
+import Form, {
+  BookingWidgetFormSkeleton,
+} from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
 import { CloseLargeIcon } from "@/components/Icons"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
 import { getFormattedUrlQueryParams } from "@/utils/url"
 
-import MobileToggleButton from "./MobileToggleButton"
+import MobileToggleButton, {
+  MobileToggleButtonSkeleton,
+} from "./MobileToggleButton"
 
 import styles from "./bookingWidget.module.css"
 
@@ -36,7 +40,6 @@ export default function BookingWidgetClient({
     name: StickyElementNameEnum.BOOKING_WIDGET,
   })
 
-
   const bookingWidgetSearchData: BookingWidgetSearchParams | undefined =
     searchParams
       ? (getFormattedUrlQueryParams(new URLSearchParams(searchParams), {
@@ -79,9 +82,7 @@ export default function BookingWidgetClient({
   const methods = useForm<BookingWidgetSchema>({
     defaultValues: {
       search: selectedLocation?.name ?? "",
-      location: selectedLocation
-        ? JSON.stringify(selectedLocation)
-        : undefined,
+      location: selectedLocation ? JSON.stringify(selectedLocation) : undefined,
       date: {
         // UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
         // This is specifically to handle timezones falling in different dates.
@@ -147,9 +148,11 @@ export default function BookingWidgetClient({
         ? JSON.parse(sessionStorageSearchData)
         : undefined
 
-    !(selectedLocation?.name) && initialSelectedLocation?.name &&
+    !selectedLocation?.name &&
+      initialSelectedLocation?.name &&
       methods.setValue("search", initialSelectedLocation.name)
-    !selectedLocation && sessionStorageSearchData &&
+    !selectedLocation &&
+      sessionStorageSearchData &&
       methods.setValue("location", encodeURIComponent(sessionStorageSearchData))
   }, [methods, selectedLocation])
 
@@ -173,3 +176,14 @@ export default function BookingWidgetClient({
     </FormProvider>
   )
 }
+
+export function BookingWidgetSkeleton() {
+  return (
+    <>
+      <section className={styles.containerDesktop}>
+        <BookingWidgetFormSkeleton />
+      </section>
+      <MobileToggleButtonSkeleton />
+    </>
+  )
+}