feat: add loading state

Author: eshankvaish

src/Shared/Components/Button/Button.component.tsx

@@ -1,11 +1,10 @@
+import { Progressing } from '@Common/Progressing'
 import { ComponentSizeType } from '@Shared/constants'
 import { ButtonProps, ButtonStyleType, ButtonVariantType } from './types'
-import { BUTTON_SIZE_TO_CLASS_NAME_MAP, BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP } from './constants'
+import { BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP, BUTTON_SIZE_TO_LOADER_SIZE_MAP } from './constants'
+import { getButtonDerivedClass } from './utils'
 import './button.scss'
 
-export const getButtonDerivedClass = ({ size, variant, style }: Pick<ButtonProps, 'variant' | 'size' | 'style'>) =>
-    `button button__${ButtonVariantType[variant]}--${ButtonStyleType[style]} ${BUTTON_SIZE_TO_CLASS_NAME_MAP[size]}`
-
 const Button = ({
     buttonProps = {},
     variant = ButtonVariantType.primary,
@@ -15,20 +14,23 @@ const Button = ({
     startIcon,
     endIcon,
     disabled,
+    isLoading,
 }: ButtonProps) => {
-    const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]}`
+    const visibilityClass = isLoading ? 'dc__visibility-hidden' : ''
+    const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]} ${visibilityClass}`
 
     return (
         <button
             {...buttonProps}
-            disabled={disabled}
+            disabled={disabled || isLoading}
             // eslint-disable-next-line react/button-has-type
             type={buttonProps.type || 'button'}
-            className={`br-4 flex cursor dc__mnw-100 dc__tab-focus ${getButtonDerivedClass({ size, variant, style })} ${disabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
+            className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style })} ${disabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
         >
             {startIcon && <span className={iconClass}>{startIcon}</span>}
-            <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>
+            <span className={`dc__mxw-150 dc__align-left dc__truncate ${visibilityClass}`}>{text}</span>
             {endIcon && <span className={iconClass}>{endIcon}</span>}
+            {isLoading && <Progressing size={BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]} />}
         </button>
     )
 }

src/Shared/Components/Button/button.scss

@@ -4,9 +4,20 @@
     border: 1px solid $border-color;
 
     svg,
-    svg>* {
+    svg * {
         stroke: $text-color;
     }
+
+    // Custom state for loader
+    .loader {
+        position: absolute;
+
+        svg,
+        svg * {
+            fill: $text-color;
+            stroke: none;
+        }
+    }
 }
 
 @mixin pseudo-states($hover-bg-color, $active-bg-color) {
@@ -27,8 +38,6 @@
     color: inherit;
     border: none;
     outline: inherit;
-    text-decoration: none;
-    text-transform: capitalize;
 
     &__primary {
         $border-color: transparent;

src/Shared/Components/Button/constants.ts

@@ -1,4 +1,5 @@
 import { ComponentSizeType } from '@Shared/constants'
+import { ProgressingProps } from '@Common/Types'
 import { ButtonProps } from './types'
 
 export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
@@ -7,12 +8,20 @@ export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>
     [ComponentSizeType.medium]: 'px-11 py-5 fs-13 lh-20 fw-6 dc__gap-8',
     [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-10',
     [ComponentSizeType.xl]: 'px-15 py-9 fs-14 lh-20 fw-6 dc__gap-12',
-}
+} as const
 
 export const BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
     [ComponentSizeType.xs]: 'icon-dim-12',
     [ComponentSizeType.small]: 'icon-dim-12',
     [ComponentSizeType.medium]: 'icon-dim-16',
     [ComponentSizeType.large]: 'icon-dim-16',
     [ComponentSizeType.xl]: 'icon-dim-20',
-}
+} as const
+
+export const BUTTON_SIZE_TO_LOADER_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']> = {
+    [ComponentSizeType.xs]: 12,
+    [ComponentSizeType.small]: 12,
+    [ComponentSizeType.medium]: 16,
+    [ComponentSizeType.large]: 16,
+    [ComponentSizeType.xl]: 20,
+} as const

src/Shared/Components/Button/utils.ts

@@ -0,0 +1,5 @@
+import { BUTTON_SIZE_TO_CLASS_NAME_MAP } from './constants'
+import { ButtonProps, ButtonStyleType, ButtonVariantType } from './types'
+
+export const getButtonDerivedClass = ({ size, variant, style }: Pick<ButtonProps, 'variant' | 'size' | 'style'>) =>
+    `button button__${ButtonVariantType[variant]}--${ButtonStyleType[style]} ${BUTTON_SIZE_TO_CLASS_NAME_MAP[size]}`