From b83f5d2ffc9675aa15e9134c4a30f4e3d7d7b350 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Wed, 30 Jul 2025 14:15:46 +0200
Subject: [PATCH] ui/button: fix loader needs explizit styling, not stylable
 via css leakage anymore

---
 pkgs/clan-app/ui/src/components/Button/Button.css | 12 ------------
 pkgs/clan-app/ui/src/components/Button/Button.tsx | 10 +++++++++-
 pkgs/clan-app/ui/src/components/Loader/Loader.tsx |  9 ++++++++-
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Button/Button.css b/pkgs/clan-app/ui/src/components/Button/Button.css
index 6851e851f..0f6df1fe2 100644
--- a/pkgs/clan-app/ui/src/components/Button/Button.css
+++ b/pkgs/clan-app/ui/src/components/Button/Button.css
@@ -123,20 +123,8 @@
     @apply pr-3.5;
   }
 
-  & > div.loader {
-    @apply w-0 opacity-0;
-    @apply top-0 left-0 -mr-2;
-    transition: all 0.5s ease;
-  }
-
   &.loading {
     @apply cursor-wait;
-
-    & > div.loader {
-      @apply w-4 opacity-100;
-      margin-right: revert;
-      transition: all 0.5s ease;
-    }
   }
 
   & > span.typography {
diff --git a/pkgs/clan-app/ui/src/components/Button/Button.tsx b/pkgs/clan-app/ui/src/components/Button/Button.tsx
index 5fbb81c38..3966cfa98 100644
--- a/pkgs/clan-app/ui/src/components/Button/Button.tsx
+++ b/pkgs/clan-app/ui/src/components/Button/Button.tsx
@@ -67,6 +67,11 @@ export const Button = (props: ButtonProps) => {
 
   const iconSize = iconSizes[local.size || "default"];
 
+  const loadingClass =
+    "w-4 opacity-100 mr-[revert] transition-all duration-500 ease-linear";
+  const idleClass =
+    "w-0 opacity-0 top-0 left-0 -mr-2 transition-all duration-500 ease-linear";
+
   return (
     <KobalteButton
       class={cx(
@@ -83,7 +88,10 @@ export const Button = (props: ButtonProps) => {
       onClick={local.onAction ? onClick : undefined}
       {...other}
     >
-      <Loader hierarchy={hierarchy} />
+      <Loader
+        hierarchy={hierarchy}
+        class={cx({ [idleClass]: !loading(), [loadingClass]: loading() })}
+      />
 
       {local.startIcon && (
         <Icon icon={local.startIcon} class="icon-start" size={iconSize} />
diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
index 2e11e3f43..c47dd2c1e 100644
--- a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
+++ b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
@@ -6,11 +6,18 @@ export type Hierarchy = "primary" | "secondary";
 
 export interface LoaderProps {
   hierarchy?: Hierarchy;
+  class?: string;
 }
 
 export const Loader = (props: LoaderProps) => {
   return (
-    <div class={cx(styles.loader, styles[props.hierarchy || "primary"])}>
+    <div
+      class={cx(
+        styles.loader,
+        styles[props.hierarchy || "primary"],
+        props.class,
+      )}
+    >
       <div class={styles.wrapper}>
         <div class={styles.parent}></div>
       </div>