From f654003f9557eeac5299d9bd34e41d2c0eeb8399 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Tue, 20 Jun 2023 18:20:13 +0800
Subject: [PATCH] fix: settings: skeleton issues (CALCOM-9627) (#9641)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../web/pages/settings/my-account/profile.tsx |  2 +-
 .../settings/layouts/SettingsLayout.tsx       | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index a890dea73a..5943d74d2f 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -50,7 +50,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
       <Meta title={title} description={description} />
       <div className="mt-6 mb-8 space-y-6">
         <div className="flex items-center">
-          <SkeletonAvatar className="h-12 w-12 px-4" />
+          <SkeletonAvatar className="me-4 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
         </div>
         <SkeletonText className="h-8 w-full" />
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index de6e138021..061fd52c5e 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -178,7 +178,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
       className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
       <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
-      <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate">
+      <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate" loadingClassName="ms-3">
         {name}
       </Skeleton>
     </Link>
@@ -245,7 +245,13 @@ const SettingsSidebarContainer = ({
                       alt="User Avatar"
                     />
                   )}
-                  <p className="truncate text-sm font-medium leading-5">{t(tab.name)}</p>
+                  <Skeleton
+                    title={tab.name}
+                    as="p"
+                    className="truncate text-sm font-medium leading-5"
+                    loadingClassName="ms-3">
+                    {t(tab.name)}
+                  </Skeleton>
                 </div>
               </div>
               <div className="my-3 space-y-0.5">
@@ -270,7 +276,13 @@ const SettingsSidebarContainer = ({
                     {tab && tab.icon && (
                       <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                     )}
-                    <p className="truncate text-sm font-medium leading-5">{t(tab.name)}</p>
+                    <Skeleton
+                      title={tab.name}
+                      as="p"
+                      className="truncate text-sm font-medium leading-5"
+                      loadingClassName="ms-3">
+                      {t(tab.name)}
+                    </Skeleton>
                   </div>
                 </Link>
                 {teams &&
@@ -386,6 +398,7 @@ const SettingsSidebarContainer = ({
                   href={`${WEBAPP_URL}/settings/teams/new`}
                   textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
                   icon={Plus}
+                  iconClassName="me-3"
                   disableChevron
                 />
               </div>