add loading position button prop

Author: nikitayutanov

idea/vara-eth/frontend/src/components/ui/button/button.module.scss

@@ -1,3 +1,9 @@
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .button {
   position: relative;
   display: inline-flex;
@@ -99,6 +105,28 @@
   }
 }
 
+.loadingPosition {
+  &center {
+    .content {
+      display: none;
+    }
+  }
+
+  &end {
+    .spinner {
+      order: 1;
+    }
+  }
+}
+
+.content {
+  display: contents;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
 .size-default {
   padding: 15px 25px;
 }
@@ -118,13 +146,3 @@
 .size-icon {
   padding: 15px;
 }
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}

idea/vara-eth/frontend/src/components/ui/button/button.tsx

@@ -10,6 +10,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: 'default' | 'outline' | 'link' | 'icon' | 'ghost' | 'secondary';
   size?: 'default' | 'sm' | 'xs' | 'icon';
   isLoading?: boolean;
+  loadingPosition?: 'start' | 'center' | 'end';
   className?: string;
 };
 
@@ -20,24 +21,24 @@ const Button = ({
   disabled,
   children,
   className,
+  loadingPosition = 'center',
   type = 'button',
   ...props
 }: ButtonProps) => {
   const isDisabled = disabled || isLoading;
+
   const buttonClass = clsx(
     styles.button,
     styles[`btn--variant-${variant}`],
     styles[`size-${size}`],
-    {
-      [styles[`state-disabled`]]: isDisabled,
-      [styles[`state-loading`]]: isLoading,
-    },
+    styles[`loadingPosition${loadingPosition}`],
     className,
   );
 
   return (
     <button className={buttonClass} disabled={isDisabled} aria-disabled={isDisabled} type={type} {...props}>
-      {isLoading ? <LoadingIcon className={styles['animate-spin']} /> : children}
+      {isLoading && <LoadingIcon className={styles.spinner} />}
+      <span className={styles.content}>{children}</span>
     </button>
   );
 };

idea/vara-eth/frontend/src/components/wallet/wallet-button.module.scss

@@ -1,6 +1,9 @@
 .button {
   min-height: 48px;
-  padding-block: 6px !important; // override default padding
+
+  // override defaults
+  padding-block: 6px !important;
+  gap: 0 !important;
 
   flex-direction: column;
 }

idea/vara-eth/frontend/src/features/programs/ui/top-up-exec-balance/top-up-exec-balance.module.scss

@@ -5,13 +5,10 @@ import { parseUnits } from 'viem';
 import { useEthereumClient, useMirrorContract } from '@/app/api';
 import { useVaraEthApi } from '@/app/providers';
 import { useAddMyActivity, TransactionTypes, unpackReceipt } from '@/app/store';
-import LoadingSVG from '@/assets/icons/loading.svg?react';
 import { Button } from '@/components';
 
 import { useWatchProgramStateChange } from '../../lib';
 
-import styles from './top-up-exec-balance.module.scss';
-
 type Props = {
   programId: HexString;
   onSuccess: () => void;
@@ -86,9 +83,7 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
   };
 
   return (
-    // TODO: spinner position prop? loadingText prop?
-    <Button size="xs" onClick={handleTopUpClick} disabled={isLoading} variant="secondary">
-      {isLoading && <LoadingSVG className={styles.spinner} />}
+    <Button size="xs" onClick={handleTopUpClick} loadingPosition="start" disabled={isLoading} variant="secondary">
       {getButtonText()}
     </Button>
   );