From 2f3cc03255c569841119d99bbc8cfdd8d1983c43 Mon Sep 17 00:00:00 2001
From: Pradumn Kumar <47187878+Pradumn27@users.noreply.github.com>
Date: Tue, 4 Jul 2023 23:07:34 +0530
Subject: [PATCH] feat: added missing skeletons for sidebar (#9909)

---
 packages/features/shell/Shell.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 168fd2b51e..066511b97c 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -49,6 +49,7 @@ import {
   HeadSeo,
   Logo,
   SkeletonText,
+  SkeletonAvatar,
   Tooltip,
   showToast,
   useCalcomTheme,
@@ -654,7 +655,7 @@ const NavigationItem: React.FC<{
           href={item.href}
           aria-label={t(item.name)}
           className={classNames(
-            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md py-1.5 px-2 text-sm font-medium",
+            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium",
             isChild
               ? `[&[aria-current='page']]:text-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
                   props.index === 0 ? "mt-0" : "mt-px"
@@ -851,6 +852,12 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                 </span>
               </div>
             )}
+            {!isLocaleReady && (
+              <div className="flex w-full gap-1">
+                <SkeletonAvatar className="min-w-5 min-h-5 mt-0 h-5 w-5" />
+                <SkeletonText className="h-[20px] w-full" />
+              </div>
+            )}
             <div className="flex space-x-0.5 rtl:space-x-reverse">
               <button
                 color="minimal"
@@ -893,7 +900,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                 target={item.target}
                 className={classNames(
                   "text-left",
-                  "[&[aria-current='page']]:bg-emphasis  text-default justify-right group flex items-center rounded-md py-1.5 px-2 text-sm font-medium",
+                  "[&[aria-current='page']]:bg-emphasis  text-default justify-right group flex items-center rounded-md px-2 py-1.5 text-sm font-medium",
                   "[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
                   isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
                   index === 0 && "mt-3"