fix: booker skeleton layout shift (#11653)
parent
c2e3638993
commit
35181e4bfd
|
@ -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}
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -18,9 +18,7 @@ type AvailableTimesHeaderProps = {
|
|||
|
||||
export const AvailableTimesHeader = ({
|
||||
date,
|
||||
|
||||
showTimeFormatToggle = true,
|
||||
|
||||
availableMonth,
|
||||
}: AvailableTimesHeaderProps) => {
|
||||
const { t, i18n } = useLocale();
|
||||
|
|
Loading…
Reference in New Issue