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>

packages/ui/booker/DatePicker.tsx

@@ -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) => (
+      {days.map((day, idx) =>
-        <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}`} />
+        ) : (
-          ) : (
+          <div key={day === null ? `e-${idx}` : `day-${day}`} className="relative w-full pt-[100%]">
-            <DayComponent
+            {day === null ? (
-              date={day}
+              <div key={`e-${idx}`} />
-              onClick={() => {
+            ) : props.isLoading ? (
-                props.onChange(day);
+              <SkeletonContainer>
-                window.scrollTo({
+                <button
-                  top: 360,
+                  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"
-                  behavior: "smooth",
+                  key={`e-${idx}`}>
-                });
+                  {day.getDate()}
-              }}
+                </button>
-              disabled={
+              </SkeletonContainer>
-                (includedDates && !includedDates.includes(yyyymmdd(day))) ||
+            ) : (
-                excludedDates.includes(yyyymmdd(day)) ||
+              <DayComponent
-                day.valueOf() < minDateValueOf
+                date={day}
-              }
+                onClick={() => {
-              active={selected ? yyyymmdd(selected) === yyyymmdd(day) : false}
+                  props.onChange(day);
-            />
+                  window.scrollTo({
-          )}
+                    top: 360,
-        </div>
+                    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(

packages/ui/skeleton/index.tsx

@@ -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 };