From 5059723ad11aaae0285b04aa87a7a59f2faab594 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Thu, 29 Jun 2023 06:09:03 +0800
Subject: [PATCH] Apply suggestions from code review (#9839)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 apps/web/pages/availability/[schedule].tsx | 20 +++++++++++++-------
 packages/ui/layouts/WizardLayout.tsx       | 21 +++++++++++++++------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 91b030273b..a4fdac00fc 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -189,7 +189,11 @@ export default function Availability() {
       CTA={
         <div className="flex items-center justify-end">
           <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 sm:flex">
-            <Skeleton as={Label} htmlFor="hiddenSwitch" className="mt-2 cursor-pointer self-center pr-2 ">
+            <Skeleton
+              as={Label}
+              htmlFor="hiddenSwitch"
+              className="mt-2 cursor-pointer self-center pe-2"
+              loadingClassName="me-4">
               {t("set_to_default")}
             </Skeleton>
             <Switch
@@ -315,9 +319,9 @@ export default function Availability() {
           <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
             <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
               <div>
-                <label htmlFor="timeZone" className="text-default block text-sm font-medium">
+                <Skeleton as={Label} htmlFor="timeZone" className="mb-0 inline-block leading-none">
                   {t("timezone")}
-                </label>
+                </Skeleton>
                 <Controller
                   name="timeZone"
                   render={({ field: { onChange, value } }) =>
@@ -328,18 +332,20 @@ export default function Availability() {
                         onChange={(timezone) => onChange(timezone.value)}
                       />
                     ) : (
-                      <SelectSkeletonLoader className="w-72" />
+                      <SelectSkeletonLoader className="mt-1 w-72" />
                     )
                   }
                 />
               </div>
               <hr className="border-subtle my-6 mr-8" />
               <div className="hidden rounded-md md:block">
-                <h3 className="text-emphasis text-sm font-medium">{t("something_doesnt_look_right")}</h3>
+                <Skeleton as="h3" className="mb-0 inline-block text-sm font-medium">
+                  {t("something_doesnt_look_right")}
+                </Skeleton>
                 <div className="mt-3 flex">
-                  <Button href="/availability/troubleshoot" color="secondary">
+                  <Skeleton as={Button} href="/availability/troubleshoot" color="secondary">
                     {t("launch_troubleshooter")}
-                  </Button>
+                  </Skeleton>
                 </div>
               </div>
             </div>
diff --git a/packages/ui/layouts/WizardLayout.tsx b/packages/ui/layouts/WizardLayout.tsx
index ae21fc8a75..03a58ee02e 100644
--- a/packages/ui/layouts/WizardLayout.tsx
+++ b/packages/ui/layouts/WizardLayout.tsx
@@ -5,7 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { StepCard, Steps, Button } from "@calcom/ui";
+import { StepCard, Steps, Button, SkeletonText } from "@calcom/ui";
 
 export function WizardLayout({
   children,
@@ -15,7 +15,7 @@ export function WizardLayout({
 }: {
   children: React.ReactNode;
 } & { maxSteps?: number; currentStep?: number; isOptionalCallback?: () => void }) {
-  const { t } = useLocale();
+  const { t, isLocaleReady } = useLocale();
   const [meta, setMeta] = useState({ title: "", subtitle: " " });
   const router = useRouter();
   const { title, subtitle } = meta;
@@ -39,10 +39,19 @@ export function WizardLayout({
           <div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
             <div className="mx-auto sm:max-w-[520px]">
               <header>
-                <p className="font-cal mb-3 text-[28px] font-medium leading-7">
-                  {title.replace(` | ${APP_NAME}`, "")}&nbsp;
-                </p>
-                <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
+                {isLocaleReady ? (
+                  <>
+                    <p className="font-cal mb-3 text-[28px] font-medium leading-7">
+                      {title.replace(` | ${APP_NAME}`, "")}&nbsp;
+                    </p>
+                    <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
+                  </>
+                ) : (
+                  <>
+                    <SkeletonText className="h-6 w-1/2" />
+                    <SkeletonText className="mt-4 h-4 w-3/4" />
+                  </>
+                )}
               </header>
               <Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
             </div>