feat(SW-1255): Add loading state to button component

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

@@ -3,6 +3,8 @@ import { Button as ButtonRAC } from 'react-aria-components'
 import { variants } from './variants'
 
 import type { ButtonProps } from './types'
+import { Spinner } from '../Spinner'
+import styles from './button.module.css'
 
 export function Button({
   variant,
@@ -12,7 +14,8 @@ export function Button({
 
   typography,
   className,
-
+  children,
+  isPending,
   ...props
 }: ButtonProps) {
   const classNames = variants({
@@ -20,10 +23,24 @@ export function Button({
     color,
     size,
     wrapping,
-
     typography,
     className,
   })
 
-  return <ButtonRAC {...props} className={classNames} />
+  return (
+    <ButtonRAC {...props} className={classNames} isPending={isPending}>
+      {({ isPending }) => {
+        return (
+          <>
+            {children}
+            {isPending && (
+              <div className={styles.spinnerWrapper}>
+                <Spinner size="Small" color="CurrentColor" />
+              </div>
+            )}
+          </>
+        )
+      }}
+    </ButtonRAC>
+  )
 }