From 307b098f831dc272b7dd475e3cd449abd3036de3 Mon Sep 17 00:00:00 2001
From: Carlos Gabriel <Graviis@users.noreply.github.com>
Date: Mon, 25 Apr 2022 20:30:15 +0200
Subject: [PATCH] feat: disable select when loading (#2475)

---
 apps/web/pages/event-types/[type].tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 1706409e31..6b3bbf823d 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -151,11 +151,28 @@ const AvailabilitySelect = ({
   onBlur: Noop;
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
+  const { t } = useLocale();
   const query = trpc.useQuery(["viewer.availability.list"]);
 
   return (
     <QueryCell
       query={query}
+      loading={() => {
+        return (
+          <Select
+            isDisabled
+            options={[]}
+            isSearchable={false}
+            onChange={props.onChange}
+            classNamePrefix="react-select"
+            className={classNames(
+              "react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm",
+              className
+            )}
+            placeholder={t("loading")}
+          />
+        );
+      }}
       success={({ data }) => {
         const options = data.schedules.map((schedule) => ({
           value: schedule.id,