fix: Smaller loader in <Button> component (#945)

fix: Smaller loader in `<Button>` component (#945)

Author: engfragui

src/button/button.stories.mdx

@@ -26,14 +26,21 @@ export function Icon() {
     )
 }
 
-export function LoadingButton(props) {
+export function LoadingButton({ disabledWhenLoading = false, ...props }) {
     const [loading, setLoading] = useState(false)
     useEffect(() => {
         if (!loading) return undefined
         const timeout = setTimeout(() => setLoading(false), 3000)
         return () => clearTimeout(timeout)
     }, [loading])
-    return <Button {...props} loading={loading} onClick={() => setLoading(true)} />
+    return (
+        <Button
+            {...props}
+            loading={loading}
+            disabled={disabledWhenLoading ? loading : props.disabled}
+            onClick={() => setLoading(true)}
+        />
+    )
 }
 
 # Button
@@ -68,6 +75,28 @@ export function LoadingButton(props) {
                         <LoadingButton variant="quaternary">Quaternary</LoadingButton>
                     </Box>
                 </Inline>
+                <Inline space="large">
+                    <Box>
+                        <LoadingButton variant="primary" disabledWhenLoading>
+                            Primary
+                        </LoadingButton>
+                    </Box>
+                    <Box>
+                        <LoadingButton variant="secondary" disabledWhenLoading>
+                            Secondary
+                        </LoadingButton>
+                    </Box>
+                    <Box>
+                        <LoadingButton variant="tertiary" disabledWhenLoading>
+                            Tertiary
+                        </LoadingButton>
+                    </Box>
+                    <Box>
+                        <LoadingButton variant="quaternary" disabledWhenLoading>
+                            Quaternary
+                        </LoadingButton>
+                    </Box>
+                </Inline>
                 <Inline space="large">
                     <Box>
                         <LoadingButton variant="primary" disabled>
@@ -115,6 +144,28 @@ export function LoadingButton(props) {
                         </LoadingButton>
                     </Box>
                 </Inline>
+                <Inline space="large">
+                    <Box>
+                        <LoadingButton variant="primary" tone="destructive" disabledWhenLoading>
+                            Primary
+                        </LoadingButton>
+                    </Box>
+                    <Box>
+                        <LoadingButton variant="secondary" tone="destructive" disabledWhenLoading>
+                            Secondary
+                        </LoadingButton>
+                    </Box>
+                    <Box>
+                        <LoadingButton variant="tertiary" tone="destructive" disabledWhenLoading>
+                            Tertiary
+                        </LoadingButton>
+                    </Box>
+                    <Box>
+                        <LoadingButton variant="quaternary" tone="destructive" disabledWhenLoading>
+                            Quaternary
+                        </LoadingButton>
+                    </Box>
+                </Inline>
                 <Inline space="large">
                     <Box>
                         <LoadingButton variant="primary" tone="destructive" disabled>

src/spinner/spinner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styles from './spinner.module.css'
 
-function Spinner({ size = 24 }: { size?: number }) {
+function Spinner({ size = 18 }: { size?: number }) {
     return (
         <svg
             aria-hidden