fix: added progress bar wrapper and handling of loading type according to button props

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -157,6 +157,13 @@ export const SecondaryDisabled: Story = {
   },
 }
 
+export const SecondaryLoading: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    isPending: true,
+  },
+}
+
 export const SecondaryLarge: Story = {
   args: {
     ...SecondaryDefault.args,

packages/design-system/lib/components/Button/Button.tsx

@@ -3,7 +3,6 @@ import { Loading, type LoadingProps } from '../Loading/Loading'
 
 import { variants } from './variants'
 import type { ButtonProps } from './types'
-import styles from './button.module.css'
 
 export function Button({
   variant,
@@ -25,17 +24,19 @@ export function Button({
     className,
   })
 
-  let loadingType: LoadingProps['type'] = 'Dark'
+  let loadingType: LoadingProps['type'] = 'White'
-
+  if (variant === 'Secondary') {
-  switch (color) {
+    if (color === 'Inverted') {
-    case 'Primary':
-      loadingType = 'Dark'
-      break
-    case 'Inverted':
       loadingType = 'White'
-      break
+    } else {
-    default:
       loadingType = 'Dark'
+    }
+  } else {
+    if (color === 'Inverted') {
+      loadingType = 'Dark'
+    } else {
+      loadingType = 'White'
+    }
   }
 
   return (
@@ -44,11 +45,7 @@ export function Button({
         return (
           <>
             {children}
-            {isPending && (
+            {isPending && <Loading size={20} type={loadingType} />}
-              <div className={styles.spinnerWrapper}>
-                <Loading size={20} type={loadingType} />
-              </div>
-            )}
           </>
         )
       }}

packages/design-system/lib/components/Loading/Loading.tsx

@@ -2,6 +2,7 @@ import styles from './loading.module.css'
 import { VariantProps } from 'class-variance-authority'
 
 import { variants } from './variants'
+import { ProgressBar } from 'react-aria-components'
 
 export interface LoadingProps extends VariantProps<typeof variants> {
   size?: number
@@ -13,22 +14,23 @@ export function Loading({ type, size = 20 }: LoadingProps) {
   })
 
   return (
-    <svg
+    <ProgressBar isIndeterminate className={classNames}>
-      xmlns="http://www.w3.org/2000/svg"
+      <svg
-      width={size}
+        xmlns="http://www.w3.org/2000/svg"
-      height={size}
+        width={size}
-      viewBox="0 0 20 21"
+        height={size}
-      fill="none"
+        viewBox="0 0 20 21"
-      className={classNames}
+        fill="none"
-    >
+      >
-      <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
+        <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
-      <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
+        <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
-      <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
+        <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
-      <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
+        <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
-      <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
+        <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
-      <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
+        <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
-      <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
+        <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
-      <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
+        <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
-    </svg>
+      </svg>
+    </ProgressBar>
   )
 }

packages/design-system/lib/components/Loading/loading.module.css

@@ -1,5 +1,6 @@
 .loading {
-  display: inline-block;
+  display: flex;
+  align-items: center;
 }
 
 .dot {