From 746643bf8e7eda0396e67c3581f5f6487b27b965 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Wed, 11 May 2022 10:56:06 +0530
Subject: [PATCH] adds availability select loader (#2718)

---
 apps/web/components/availability/SkeletonLoader.tsx | 13 +++++++++++++
 apps/web/pages/event-types/[type].tsx               |  2 ++
 2 files changed, 15 insertions(+)

diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index 2c12aa37c4..d85e129401 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -31,3 +31,16 @@ function SkeletonItem() {
     </li>
   );
 }
+
+export const AvailabilitySelectSkeletonLoader = () => {
+  return (
+    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-between">
+          <SkeletonText width="32" height="4"></SkeletonText>
+          <SkeletonText width="4" height="4"></SkeletonText>
+        </div>
+      </div>
+    </li>
+  );
+};
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 0f6ff47a29..87e55076bb 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -60,6 +60,7 @@ import { EmbedButton, EmbedDialog } from "@components/Embed";
 import Loader from "@components/Loader";
 import Shell from "@components/Shell";
 import { UpgradeToProDialog } from "@components/UpgradeToProDialog";
+import { AvailabilitySelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import RecurringEventController from "@components/eventtype/RecurringEventController";
 import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
@@ -164,6 +165,7 @@ const AvailabilitySelect = ({
   return (
     <QueryCell
       query={query}
+      customLoader={<AvailabilitySelectSkeletonLoader />}
       success={({ data }) => {
         const options = data.schedules.map((schedule) => ({
           value: schedule.id,