Add custom spinner to button

src/renderer/components/button/index.tsx

@@ -6,10 +6,12 @@ import {
   TooltipProps,
 } from '@mantine/core';
 import styled from 'styled-components';
+import { Spinner } from '@/renderer/components/spinner';
 import { Tooltip } from '@/renderer/components/tooltip';
 
 interface ButtonProps extends MantineButtonProps {
   children: React.ReactNode;
+  loading?: boolean;
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   tooltip?: Omit<TooltipProps, 'children'>;
 }
@@ -31,6 +33,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
         return '';
     }
   }};
+  font-weight: normal;
   background: ${(props) => {
     switch (props.variant) {
       case 'default':
@@ -44,6 +47,23 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     }
   }};
   border: none;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  svg {
+    transition: fill 0.2s ease-in-out;
+    fill: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg)';
+        case 'filled':
+          return 'var(--btn-primary-fg)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg)';
+        default:
+          return '';
+      }
+    }};
+  }
 
   &:disabled {
     color: ${(props) => {
@@ -99,6 +119,21 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
           return '';
       }
     }};
+
+    svg {
+      fill: ${(props) => {
+        switch (props.variant) {
+          case 'default':
+            return 'var(--btn-default-fg-hover)';
+          case 'filled':
+            return 'var(--btn-primary-fg-hover)';
+          case 'subtle':
+            return 'var(--btn-subtle-fg-hover)';
+          default:
+            return '';
+        }
+      }};
+    }
   }
 
   &:focus-visible {
@@ -131,6 +166,25 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
   &:active {
     transform: scale(0.98);
   }
+
+  & .mantine-Button-centerLoader {
+    display: none;
+  }
+
+  & .mantine-Button-leftIcon {
+    margin-right: 0.5rem;
+  }
+`;
+
+const ButtonChildWrapper = styled.span<ButtonProps>`
+  color: ${(props) => props.loading && 'transparent !important'};
+`;
+
+const SpinnerWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
 `;
 
 export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -139,7 +193,14 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
       return (
         <Tooltip withinPortal {...tooltip}>
           <StyledButton ref={ref} loaderPosition="center" {...props}>
-            {children}
+            <ButtonChildWrapper loading={props.loading}>
+              {children}
+            </ButtonChildWrapper>
+            {props.loading && (
+              <SpinnerWrapper>
+                <Spinner />
+              </SpinnerWrapper>
+            )}
           </StyledButton>
         </Tooltip>
       );
@@ -147,7 +208,14 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <StyledButton ref={ref} loaderPosition="center" {...props}>
-        {children}
+        <ButtonChildWrapper loading={props.loading}>
+          {children}
+        </ButtonChildWrapper>
+        {props.loading && (
+          <SpinnerWrapper>
+            <Spinner />
+          </SpinnerWrapper>
+        )}
       </StyledButton>
     );
   }
@@ -158,6 +226,7 @@ export const Button = createPolymorphicComponent<'button', ButtonProps>(
 );
 
 _Button.defaultProps = {
+  loading: undefined,
   onClick: undefined,
   tooltip: undefined,
 };