Refactor Button component loading styles: streamline shimmer effect and remove redundant styleType checks

Author: elizabetdev

src/components/Button/Button.tsx

@@ -57,7 +57,7 @@ export const Button = ({
       />
     )}
 
-    {label ?? children}
+    <span>{label ?? children}</span>
 
     {iconRight && (
       <ButtonIcon
@@ -69,12 +69,21 @@ export const Button = ({
   </StyledButton>
 );
 
-const shimmer = keyframes`
+const shimmerFullWidth = keyframes`
   0% {
+    background-position: -100% 0;
+  }
+  100% {
     background-position: 100% 0;
   }
+`;
+
+const shimmerFixedWidth = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
   100% {
-    background-position: -100% 0;
+    background-position: 200px 0;
   }
 `;
 
@@ -108,27 +117,29 @@ const StyledButton = styled(BaseButton)<{
     right: 0;
     bottom: 0;
     pointer-events: none;
-    background-size: 200% 100%;
+    background-size: ${({ $fillWidth }) => ($fillWidth ? "200% 100%" : "200px 100%")};
     opacity: 0;
+    z-index: 0;
   }
 
-  ${({ $loading, $styleType, theme }) => {
-    if (!$loading) return "";
+  /* Ensure content stays above shimmer */
+  > * {
+    position: relative;
+    z-index: 1;
+  }
 
-    const bgHover = theme.click.button.basic.color[$styleType].background.hover;
+  ${({ $loading, $fillWidth, $styleType, theme }) => {
+    if (!$loading) return "";
 
-    const shimmerGradient = `linear-gradient(
-      90deg,
-      ${bgHover} 0%,
-      transparent 50%,
-      ${bgHover} 100%
-    )`;
+    const shimmerGradient = theme.click.button.basic.color[$styleType].background.loading;
+    const bgSize = $fillWidth ? "200% 100%" : "200px 100%";
+    const shimmerAnimation = $fillWidth ? shimmerFullWidth : shimmerFixedWidth;
 
     return css`
       &::before {
         background: ${shimmerGradient};
-        background-size: 200% 100%;
-        animation: ${shimmer} 1.5s ease-in-out infinite;
+        background-size: ${bgSize};
+        animation: ${shimmerAnimation} 1.5s ease-in-out infinite;
         opacity: 1;
       }
     `;
@@ -179,39 +190,17 @@ const StyledButton = styled(BaseButton)<{
   }}
 
   /* Loading state styling */
-  ${({ $loading, $styleType }) => {
+  ${({ $loading }) => {
     if (!$loading) return "";
 
-    if ($styleType === "primary") {
-      // Primary: 60% opacity + shimmer animation
-      return css`
-        cursor: not-allowed;
-
-        &::before {
-          opacity: 0.6;
-        }
-      `;
-    } else if ($styleType === "secondary" || $styleType === "empty") {
-      // Secondary & Empty: Full opacity during loading, shimmer only, text dimmed (70%)
-      return css`
-        cursor: not-allowed;
-
-        &::before {
-          opacity: 0.7;
-        }
-      `;
-    } else if ($styleType === "danger") {
-      // Destructive: Full opacity during loading, shimmer only, text dimmed (70%)
-      return css`
-        cursor: not-allowed;
-
-        &::before {
-          opacity: 0.7;
-        }
-      `;
-    }
+    return css`
+      cursor: not-allowed;
 
-    return "";
+      /* Dim text and icons to 70% */
+      > * {
+        opacity: 0.7;
+      }
+    `;
   }}
 `;
 

src/theme/tokens/types.ts

@@ -399,6 +399,7 @@ export interface Theme {
               hover: string;
               active: string;
               disabled: string;
+              loading: string;
             };
             stroke: {
               default: string;
@@ -419,6 +420,7 @@ export interface Theme {
               hover: string;
               active: string;
               disabled: string;
+              loading: string;
             };
             stroke: {
               default: string;
@@ -445,6 +447,7 @@ export interface Theme {
               hover: string;
               active: string;
               disabled: string;
+              loading: string;
             };
             stroke: {
               default: string;
@@ -465,6 +468,7 @@ export interface Theme {
               hover: string;
               active: string;
               disabled: string;
+              loading: string;
             };
             stroke: {
               default: string;

src/theme/tokens/variables.dark.json

@@ -172,7 +172,8 @@
               "default": "#FAFF69",
               "hover": "rgb(98.6% 100% 58.8%)",
               "active": "rgb(90.7% 92.5% 38.1%)",
-              "disabled": "#414141"
+              "disabled": "#414141",
+              "loading": "linear-gradient(\n  90deg,\n  rgba(250, 255, 105, 0.8) 0%,\n  rgba(255, 255, 255, 0.5) 50%,\n  rgba(250, 255, 105, 0.8) 100%\n)"
             },
             "stroke": {
               "default": "#FAFF69",
@@ -192,7 +193,8 @@
               "default": "#1F1F1C",
               "hover": "#282828",
               "active": "rgb(19.9% 19.9% 19.9%)",
-              "disabled": "#414141"
+              "disabled": "#414141",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(31, 31, 28) 0%,\n  rgba(255, 255, 255, 0.2) 50%,\n  rgb(31, 31, 28) 100%\n)"
             },
             "stroke": {
               "default": "#414141",
@@ -218,7 +220,8 @@
               "default": "rgb(100% 13.7% 13.7% / 0.2)",
               "hover": "rgb(100% 13.7% 13.7% / 0.3)",
               "active": "rgb(100% 13.7% 13.7% / 0.45)",
-              "disabled": "#414141"
+              "disabled": "#414141",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(76, 32, 29) 0%,\n  rgba(255, 255, 255, 0.25) 50%,\n  rgb(76, 32, 29) 100%\n)"
             },
             "stroke": {
               "default": "rgb(100% 22.3% 22.3% / 0.1)",
@@ -238,7 +241,8 @@
               "default": "rgba(0,0,0,0)",
               "hover": "#282828",
               "active": "rgba(0,0,0,0)",
-              "disabled": "rgba(0,0,0,0)"
+              "disabled": "rgba(0,0,0,0)",
+              "loading": "linear-gradient(\n  90deg,\n  rgba(250, 255, 105, 0.1) 0%,\n  rgba(250, 255, 105, 0.3) 50%,\n  rgba(250, 255, 105, 0.1) 100%\n)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",

src/theme/tokens/variables.json

@@ -398,7 +398,8 @@
               "default": "#302e32",
               "hover": "lch(29.5 4.18 267)",
               "active": "#161517",
-              "disabled": "#dfdfdf"
+              "disabled": "#dfdfdf",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(61, 59, 60) 0%,\n  rgba(255, 255, 255, 0.3) 50%,\n  rgb(61, 59, 60) 100%\n)"
             },
             "stroke": {
               "default": "#302e32",
@@ -418,7 +419,8 @@
               "default": "rgba(0,0,0,0)",
               "hover": "#f6f7fa",
               "active": "lch(95.3 1.54 272)",
-              "disabled": "#dfdfdf"
+              "disabled": "#dfdfdf",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(232, 233, 235) 0%,\n  rgba(255, 255, 255, 0.95) 50%,\n  rgb(232, 233, 235) 100%\n)"
             },
             "stroke": {
               "default": "#e6e7e9",
@@ -444,7 +446,8 @@
               "default": "rgb(100% 13.7% 13.7% / 0.1)",
               "hover": "rgb(100% 13.7% 13.7% / 0.2)",
               "active": "rgb(100% 13.7% 13.7% / 0.3)",
-              "disabled": "#dfdfdf"
+              "disabled": "#dfdfdf",
+              "loading": "linear-gradient(\n  90deg,\n  rgba(255, 35, 35, 0.05) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgba(255, 35, 35, 0.05) 100%\n)"
             },
             "stroke": {
               "default": "rgb(100% 13.7% 13.7% / 0.1)",
@@ -464,7 +467,8 @@
               "default": "rgba(0,0,0,0)",
               "hover": "#f6f7fa",
               "active": "rgba(0,0,0,0)",
-              "disabled": "rgba(0,0,0,0)"
+              "disabled": "rgba(0,0,0,0)",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(240, 242, 248) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgb(240, 242, 248) 100%\n)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",

src/theme/tokens/variables.light.json

@@ -172,7 +172,8 @@
               "default": "#302e32",
               "hover": "lch(29.5 4.18 267)",
               "active": "#161517",
-              "disabled": "#dfdfdf"
+              "disabled": "#dfdfdf",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(61, 59, 60) 0%,\n  rgba(255, 255, 255, 0.3) 50%,\n  rgb(61, 59, 60) 100%\n)"
             },
             "stroke": {
               "default": "#302e32",
@@ -192,7 +193,8 @@
               "default": "rgba(0,0,0,0)",
               "hover": "#f6f7fa",
               "active": "lch(95.3 1.54 272)",
-              "disabled": "#dfdfdf"
+              "disabled": "#dfdfdf",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(232, 233, 235) 0%,\n  rgba(255, 255, 255, 0.95) 50%,\n  rgb(232, 233, 235) 100%\n)"
             },
             "stroke": {
               "default": "#e6e7e9",
@@ -218,7 +220,8 @@
               "default": "rgb(100% 13.7% 13.7% / 0.1)",
               "hover": "rgb(100% 13.7% 13.7% / 0.2)",
               "active": "rgb(100% 13.7% 13.7% / 0.3)",
-              "disabled": "#dfdfdf"
+              "disabled": "#dfdfdf",
+              "loading": "linear-gradient(\n  90deg,\n  rgba(255, 35, 35, 0.05) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgba(255, 35, 35, 0.05) 100%\n)"
             },
             "stroke": {
               "default": "rgb(100% 13.7% 13.7% / 0.1)",
@@ -238,7 +241,8 @@
               "default": "rgba(0,0,0,0)",
               "hover": "#f6f7fa",
               "active": "rgba(0,0,0,0)",
-              "disabled": "rgba(0,0,0,0)"
+              "disabled": "rgba(0,0,0,0)",
+              "loading": "linear-gradient(\n  90deg,\n  rgb(240, 242, 248) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgb(240, 242, 248) 100%\n)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",