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'
-
-  switch (color) {
-    case 'Primary':
-      loadingType = 'Dark'
-      break
-    case 'Inverted':
+  let loadingType: LoadingProps['type'] = 'White'
+  if (variant === 'Secondary') {
+    if (color === 'Inverted') {
       loadingType = 'White'
-      break
-    default:
+    } else {
       loadingType = 'Dark'
+    }
+  } else {
+    if (color === 'Inverted') {
+      loadingType = 'Dark'
+    } else {
+      loadingType = 'White'
+    }
   }
 
   return (
@@ -44,11 +45,7 @@ export function Button({
         return (
           <>
             {children}
-            {isPending && (
-              <div className={styles.spinnerWrapper}>
-                <Loading size={20} type={loadingType} />
-              </div>
-            )}
+            {isPending && <Loading size={20} type={loadingType} />}
           </>
         )
       }}