From 35181e4bfdb51f2b5f80f33919a46a1b41ec4cb4 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 2 Oct 2023 17:53:10 +0100
Subject: [PATCH] fix: booker skeleton layout shift (#11653)

---
 .../Booker/components/AvailableTimeSlots.tsx  | 33 ++++++++++---------
 .../bookings/components/AvailableTimes.tsx    |  2 +-
 .../components/AvailableTimesHeader.tsx       |  2 --
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
index f4d681aa79..8d34240b8d 100644
--- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
+++ b/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}
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index 4d9b4a3a21..29bc587255 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/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} />
diff --git a/packages/features/bookings/components/AvailableTimesHeader.tsx b/packages/features/bookings/components/AvailableTimesHeader.tsx
index eeba9ca57e..983028f7dc 100644
--- a/packages/features/bookings/components/AvailableTimesHeader.tsx
+++ b/packages/features/bookings/components/AvailableTimesHeader.tsx
@@ -18,9 +18,7 @@ type AvailableTimesHeaderProps = {
 
 export const AvailableTimesHeader = ({
   date,
-
   showTimeFormatToggle = true,
-
   availableMonth,
 }: AvailableTimesHeaderProps) => {
   const { t, i18n } = useLocale();