maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DatePicker Skeleton visibility improvements

This commit is contained in:
zomars 2022-06-27 18:04:43 -06:00
parent 02571aabe0
commit de0cb867d1
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui/booker/DatePicker.tsx
View File

@ -5,7 +5,7 @@ import isToday from "dayjs/plugin/isToday";
import classNames from "@calcom/lib/classNames";
import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
import { weekdayNames } from "@calcom/lib/weekday";
import { SkeletonContainer, SkeletonText } from "@calcom/ui/skeleton";
import { SkeletonText } from "@calcom/ui/skeleton";
dayjs.extend(isToday);
@ -88,13 +88,12 @@ const Days = ({
{day === null ? (
<div key={`e-${idx}`} />
) : props.isLoading ? (
<SkeletonContainer>
<button
className="absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm border-transparent bg-gray-50 text-gray-400 opacity-50 dark:bg-gray-900 dark:text-gray-400"
key={`e-${idx}`}>
{day.date()}
</button>
</SkeletonContainer>
<button
className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:bg-gray-900 dark:text-gray-400"
key={`e-${idx}`}
disabled>
<SkeletonText width="5" height="4" />
</button>
) : (
<DayComponent
date={day}