fix: booker skeleton layout shift (#11653)

packages/features/bookings/Booker/components/AvailableTimeSlots.tsx

@@ -103,22 +103,23 @@ export const AvailableTimeSlots = ({
   return (
     <>
       <div className="flex">
-        {schedule.isLoading
-          ? // Shows exact amount of days as skeleton.
-            Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
-          : slotsPerDay.length > 0 &&
-            slotsPerDay.map((slots) => (
-              <AvailableTimesHeader
-                key={slots.date}
-                date={dayjs(slots.date)}
-                showTimeFormatToggle={!isColumnView}
-                availableMonth={
-                  dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
-                    ? dayjs(slots.date).format("MMM")
-                    : undefined
-                }
-              />
-            ))}
+        {schedule.isLoading ? (
+          <div className="mb-3 h-8" />
+        ) : (
+          slotsPerDay.length > 0 &&
+          slotsPerDay.map((slots) => (
+            <AvailableTimesHeader
+              key={slots.date}
+              date={dayjs(slots.date)}
+              showTimeFormatToggle={!isColumnView}
+              availableMonth={
+                dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
+                  ? dayjs(slots.date).format("MMM")
+                  : undefined
+              }
+            />
+          ))
+        )}
       </div>
       <div
         ref={containerRef}

packages/features/bookings/components/AvailableTimes.tsx

@@ -95,7 +95,7 @@ export const AvailableTimes = ({
 };
 
 export const AvailableTimesSkeleton = () => (
-  <div className="mt-8 flex w-[20%] flex-col only:w-full">
+  <div className="flex w-[20%] flex-col only:w-full">
     {/* Random number of elements between 1 and 6. */}
     {Array.from({ length: Math.floor(Math.random() * 6) + 1 }).map((_, i) => (
       <SkeletonText className="mb-4 h-6 w-full" key={i} />

packages/features/bookings/components/AvailableTimesHeader.tsx

@@ -18,9 +18,7 @@ type AvailableTimesHeaderProps = {
 
 export const AvailableTimesHeader = ({
   date,
-
   showTimeFormatToggle = true,
-
   availableMonth,
 }: AvailableTimesHeaderProps) => {
   const { t, i18n } = useLocale();