From b7cecfbb668273e5ce251f6b788bce0821392133 Mon Sep 17 00:00:00 2001
From: Piyush Garg <gargpiyush195@gmail.com>
Date: Mon, 5 Jun 2023 14:54:16 +0530
Subject: [PATCH] fix: Skeleton Padding and Width Issue (#9310)

* Fixed the Skeleton Padding and Width Issue

* Fix the Icon Bounce on Skeleton

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 packages/features/shell/Shell.tsx         | 9 +++++----
 packages/ui/components/skeleton/index.tsx | 4 +++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index aaae5f1661..28a92475c2 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -646,17 +646,18 @@ const NavigationItem: React.FC<{
           href={item.href}
           aria-label={t(item.name)}
           className={classNames(
-            "hover:bg-emphasis [&[aria-current='page']]:bg-emphasis hover:text-emphasis text-default group flex items-center rounded-md py-2 px-3 text-sm font-medium",
+            "[&[aria-current='page']]:bg-emphasis  text-default group flex items-center rounded-md py-2 px-3 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"
                 }`
-              : "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm"
+              : "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
+            isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : ""
           )}
           aria-current={current ? "page" : undefined}>
           {item.icon && (
             <item.icon
-              className="h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 [&[aria-current='page']]:text-inherit"
+              className="mr-2 h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 [&[aria-current='page']]:text-inherit"
               aria-hidden="true"
               aria-current={current ? "page" : undefined}
             />
@@ -667,7 +668,7 @@ const NavigationItem: React.FC<{
               {item.badge && item.badge}
             </span>
           ) : (
-            <SkeletonText className="h-3 w-32" />
+            <SkeletonText style={{ width: `${item.name.length * 10}px` }} className="h-[20px]" />
           )}
         </Link>
       </Tooltip>
diff --git a/packages/ui/components/skeleton/index.tsx b/packages/ui/components/skeleton/index.tsx
index 470ef815e6..2e537c9eac 100644
--- a/packages/ui/components/skeleton/index.tsx
+++ b/packages/ui/components/skeleton/index.tsx
@@ -62,12 +62,14 @@ const Skeleton = <T extends keyof JSX.IntrinsicElements | React.FC>({
   );
 };
 
-const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean }> = ({
+const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean; style?: React.CSSProperties }> = ({
   className = "",
   invisible = false,
+  style,
 }) => {
   return (
     <span
+      style={style}
       className={classNames(
         `font-size-0 bg-emphasis inline-block animate-pulse rounded-md empty:before:inline-block empty:before:content-['']`,
         className,