Merge pull request 'ui/button: fix loader needs explizit styling, not stylable via css leakage anymore' (#4536) from ui-progress into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4536

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 {

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} />

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>