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
Alex van Andel 2022-06-24 23:45:38 +01:00 committed by GitHub
parent 13b5618a71
commit fd863b2ae7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 44 deletions

View File

@ -6,6 +6,7 @@ import { useMemo, useState } from "react";
import classNames from "@calcom/lib/classNames"; import classNames from "@calcom/lib/classNames";
import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns"; import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
import { weekdayNames } from "@calcom/lib/weekday"; import { weekdayNames } from "@calcom/lib/weekday";
import { SkeletonContainer } from "@calcom/ui/skeleton";
dayjs.extend(isToday); dayjs.extend(isToday);
@ -42,7 +43,7 @@ export const Day = ({
return ( return (
<button <button
className={classNames( 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 active
? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast" ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
: !props.disabled : !props.disabled
@ -89,10 +90,21 @@ const Days = ({
return ( return (
<> <>
{days.map((day, idx) => ( {days.map((day, idx) =>
day === null ? (
<div key={`e-${idx}`} />
) : (
<div key={day === null ? `e-${idx}` : `day-${day}`} className="relative w-full pt-[100%]"> <div key={day === null ? `e-${idx}` : `day-${day}`} className="relative w-full pt-[100%]">
{day === null ? ( {day === null ? (
<div key={`e-${idx}`} /> <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 <DayComponent
date={day} date={day}
@ -112,33 +124,18 @@ const Days = ({
/> />
)} )}
</div> </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 = ({ const DatePicker = ({
weekStart = 0, weekStart = 0,
className, className,
locale, locale,
selected, selected,
onMonthChange, onMonthChange,
isLoading = false,
...passThroughProps ...passThroughProps
}: DatePickerProps & Partial<React.ComponentProps<typeof Days>>) => { }: DatePickerProps & Partial<React.ComponentProps<typeof Days>>) => {
const [month, setMonth] = useState(selected ? selected.getMonth() : new Date().getMonth()); 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 className="text-bookinglight">{new Date(new Date().setMonth(month)).getFullYear()}</span>
</span> </span>
<div className="text-black dark:text-white"> <div className="text-black dark:text-white">
{isLoading && <Spinner />}
<button <button
onClick={() => changeMonth(month - 1)} onClick={() => changeMonth(month - 1)}
className={classNames( className={classNames(

View File

@ -15,6 +15,7 @@ interface AvatarProps extends SkeletonBaseProps {
interface SkeletonContainer { interface SkeletonContainer {
as?: keyof JSX.IntrinsicElements; as?: keyof JSX.IntrinsicElements;
children?: React.ReactNode; children?: React.ReactNode;
className?: string;
} }
const SkeletonAvatar: React.FC<AvatarProps> = ({ width, height }) => { 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"; 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 }; export { SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer };