From 6a8e55ce15e4f3deb93a02f1d34c3814fcbd2643 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 26 Nov 2025 14:56:39 -0800
Subject: [PATCH] refactor button to use default loader

---
 src/shared/components/button/button.module.css | 17 ++++++++++++++++-
 src/shared/components/button/button.tsx        | 15 ++++-----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/button/button.module.css b/src/shared/components/button/button.module.css
index ca1663ffc..ef7521344 100644
--- a/src/shared/components/button/button.module.css
+++ b/src/shared/components/button/button.module.css
@@ -2,9 +2,24 @@
     font-weight: 500;
     border: 1px solid transparent;
     transition:
+        opacity 0.2s ease,
         background-color 0.2s ease-in-out,
         border-color 0.2s ease-in-out;
 
+    &[data-loading='true'] {
+        transform: none;
+
+        &::before {
+            transition: none;
+            transition: opacity 0.1s ease;
+        }
+
+        .inner {
+            opacity: 0;
+            transform: none;
+        }
+    }
+
     &[data-disabled='true'] {
         opacity: 0.6;
     }
@@ -143,7 +158,7 @@
 }
 
 .loader {
-    display: none;
+    transition-duration: 0;
 }
 
 .section {
diff --git a/src/shared/components/button/button.tsx b/src/shared/components/button/button.tsx
index d31fd6e2d..c4c4292d5 100644
--- a/src/shared/components/button/button.tsx
+++ b/src/shared/components/button/button.tsx
@@ -6,7 +6,6 @@ import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import styles from './button.module.css';
 
-import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Tooltip, TooltipProps } from '/@/shared/components/tooltip/tooltip';
 import { useTimeout } from '/@/shared/hooks/use-timeout';
 import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
@@ -48,6 +47,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
                     <MantineButton
                         autoContrast
                         classNames={{
+                            inner: styles.inner,
                             label: clsx(styles.label, {
                                 [styles.uppercase]: uppercase,
                             }),
@@ -56,6 +56,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
                             section: styles.section,
                             ...classNames,
                         }}
+                        loading={loading}
                         ref={ref}
                         size={size}
                         style={style}
@@ -63,11 +64,6 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
                         {...props}
                     >
                         {children}
-                        {loading && (
-                            <div className={styles.spinner}>
-                                <Spinner />
-                            </div>
-                        )}
                     </MantineButton>
                 </Tooltip>
             );
@@ -76,6 +72,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
         return (
             <MantineButton
                 classNames={{
+                    inner: styles.inner,
                     label: clsx(styles.label, {
                         [styles.uppercase]: uppercase,
                     }),
@@ -84,6 +81,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
                     section: styles.section,
                     ...classNames,
                 }}
+                loading={loading}
                 ref={ref}
                 size={size}
                 style={style}
@@ -91,11 +89,6 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 {...props}
             >
                 {children}
-                {loading && (
-                    <div className={styles.spinner}>
-                        <Spinner />
-                    </div>
-                )}
             </MantineButton>
         );
     },