Refactor booking widget skeleton

components/BookingWidget/MobileToggleButton/index.tsx

@@ -7,6 +7,7 @@ import { dt } from "@/lib/dt"
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
 import { EditIcon, SearchIcon } from "@/components/Icons"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -24,7 +25,6 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 export default function MobileToggleButton({
   openMobileSearch,
 }: BookingWidgetToggleButtonProps) {
-  const [hasMounted, setHasMounted] = useState(false)
   const intl = useIntl()
   const lang = useLang()
   const d = useWatch({ name: "date" })
@@ -46,14 +46,6 @@ export default function MobileToggleButton({
   const selectedFromDate = dt(d.fromDate).locale(lang).format("D MMM")
   const selectedToDate = dt(d.toDate).locale(lang).format("D MMM")
 
-  useEffect(() => {
-    setHasMounted(true)
-  }, [])
-
-  if (!hasMounted) {
-    return null
-  }
-
   const locationAndDateIsSet = parsedLocation && d
 
   const totalRooms = rooms.length
@@ -133,3 +125,33 @@ export default function MobileToggleButton({
     </div>
   )
 }
+
+export function MobileToggleButtonSkeleton() {
+  const intl = useIntl()
+  const bookingWidgetMobileRef = useRef(null)
+  useStickyPosition({
+    ref: bookingWidgetMobileRef,
+    name: StickyElementNameEnum.BOOKING_WIDGET_MOBILE,
+  })
+
+  return (
+    <div className={styles.partial} ref={bookingWidgetMobileRef}>
+      <div>
+        <Caption type="bold" color="red">
+          {intl.formatMessage({ id: "Where to" })}
+        </Caption>
+        <SkeletonShimmer height="24px" />
+      </div>
+      <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
+      <div>
+        <Caption type="bold" color="red">
+          {intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
+        </Caption>
+        <SkeletonShimmer height="24px" />
+      </div>
+      <div className={styles.icon}>
+        <SearchIcon color="white" />
+      </div>
+    </div>
+  )
+}