Removed the Spinner in favour of a DatePicker skeleton loader (#3146)
* Removed the Spinner in favour of a DatePicker skeleton loader * removed number, lighter skeleton, dark mode fixes * replaced button with div * readded number Co-authored-by: Peer Richelsen <peer@cal.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>feat/add-version-endpoint-info
parent
13b5618a71
commit
fd863b2ae7
|
@ -6,6 +6,7 @@ import { useMemo, useState } from "react";
|
|||
import classNames from "@calcom/lib/classNames";
|
||||
import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
|
||||
import { weekdayNames } from "@calcom/lib/weekday";
|
||||
import { SkeletonContainer } from "@calcom/ui/skeleton";
|
||||
|
||||
dayjs.extend(isToday);
|
||||
|
||||
|
@ -42,7 +43,7 @@ export const Day = ({
|
|||
return (
|
||||
<button
|
||||
className={classNames(
|
||||
"hover:border-brand disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm border border-transparent text-center font-medium disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
|
||||
"hover:border-brand disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto rounded-sm border border-transparent text-center font-medium disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
|
||||
active
|
||||
? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
|
||||
: !props.disabled
|
||||
|
@ -89,56 +90,52 @@ const Days = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
{days.map((day, idx) => (
|
||||
<div key={day === null ? `e-${idx}` : `day-${day}`} className="relative w-full pt-[100%]">
|
||||
{day === null ? (
|
||||
<div key={`e-${idx}`} />
|
||||
) : (
|
||||
<DayComponent
|
||||
date={day}
|
||||
onClick={() => {
|
||||
props.onChange(day);
|
||||
window.scrollTo({
|
||||
top: 360,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}}
|
||||
disabled={
|
||||
(includedDates && !includedDates.includes(yyyymmdd(day))) ||
|
||||
excludedDates.includes(yyyymmdd(day)) ||
|
||||
day.valueOf() < minDateValueOf
|
||||
}
|
||||
active={selected ? yyyymmdd(selected) === yyyymmdd(day) : false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{days.map((day, idx) =>
|
||||
day === null ? (
|
||||
<div key={`e-${idx}`} />
|
||||
) : (
|
||||
<div key={day === null ? `e-${idx}` : `day-${day}`} className="relative w-full pt-[100%]">
|
||||
{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-200"
|
||||
key={`e-${idx}`}>
|
||||
{day.getDate()}
|
||||
</button>
|
||||
</SkeletonContainer>
|
||||
) : (
|
||||
<DayComponent
|
||||
date={day}
|
||||
onClick={() => {
|
||||
props.onChange(day);
|
||||
window.scrollTo({
|
||||
top: 360,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}}
|
||||
disabled={
|
||||
(includedDates && !includedDates.includes(yyyymmdd(day))) ||
|
||||
excludedDates.includes(yyyymmdd(day)) ||
|
||||
day.valueOf() < minDateValueOf
|
||||
}
|
||||
active={selected ? yyyymmdd(selected) === yyyymmdd(day) : false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Spinner = () => (
|
||||
<svg
|
||||
className="mt-[-9px] mr-1 inline h-5 w-5 animate-spin text-black dark:text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx={12} cy={12} r={10} stroke="currentColor" strokeWidth={4} />
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DatePicker = ({
|
||||
weekStart = 0,
|
||||
className,
|
||||
locale,
|
||||
selected,
|
||||
onMonthChange,
|
||||
isLoading = false,
|
||||
...passThroughProps
|
||||
}: DatePickerProps & Partial<React.ComponentProps<typeof Days>>) => {
|
||||
const [month, setMonth] = useState(selected ? selected.getMonth() : new Date().getMonth());
|
||||
|
@ -162,7 +159,6 @@ const DatePicker = ({
|
|||
<span className="text-bookinglight">{new Date(new Date().setMonth(month)).getFullYear()}</span>
|
||||
</span>
|
||||
<div className="text-black dark:text-white">
|
||||
{isLoading && <Spinner />}
|
||||
<button
|
||||
onClick={() => changeMonth(month - 1)}
|
||||
className={classNames(
|
||||
|
|
|
@ -15,6 +15,7 @@ interface AvatarProps extends SkeletonBaseProps {
|
|||
interface SkeletonContainer {
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SkeletonAvatar: React.FC<AvatarProps> = ({ width, height }) => {
|
||||
|
@ -35,9 +36,9 @@ const SkeletonButton: React.FC<SkeletonBaseProps> = ({ width, height }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const SkeletonContainer: React.FC<SkeletonContainer> = ({ children, as }) => {
|
||||
const SkeletonContainer: React.FC<SkeletonContainer> = ({ children, as, className }) => {
|
||||
const Component = as || "div";
|
||||
return <Component className="animate-pulse">{children}</Component>;
|
||||
return <Component className={classNames("animate-pulse", className)}>{children}</Component>;
|
||||
};
|
||||
|
||||
export { SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer };
|
||||
|
|
Loading…
Reference in New Issue