DatePicker Skeleton visibility improvements

Author: zomars

packages/ui/booker/DatePicker.tsx

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