feat: Add loading state to Button component with spinner indicator

Author: medyo

src/components/Elements/Button/Button.css

@@ -32,6 +32,12 @@
     padding: 1rem 2rem;
     font-size: 1.25rem;
   }
+
+  &.loading {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
 }
 
 .circle-button {

src/components/Elements/Button/Button.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
+import { Spinner } from '../Spinner'
 import './Button.css'
-
 const sizes = {
   small: 'small',
   medium: 'medium',
@@ -14,6 +14,7 @@ type ButtonProps = {
   size?: keyof typeof sizes
   startIcon?: React.ReactNode
   endIcon?: React.ReactNode
+  isLoading?: boolean
 }
 export const Button = ({
   size = 'medium',
@@ -22,10 +23,14 @@ export const Button = ({
   startIcon,
   endIcon,
   children,
+  isLoading = false,
 }: ButtonProps) => {
   return (
-    <button className={clsx('button', sizes[size], className)} onClick={onClick}>
-      {startIcon}
+    <button
+      className={clsx('button', isLoading && 'loading', sizes[size], className)}
+      onClick={onClick}
+      disabled={isLoading}>
+      {isLoading ? <Spinner size="small" /> : startIcon}
       {children}
       {endIcon}
     </button>