fix: child visibility for loading state

Author: eshankvaish

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

@@ -16,19 +16,18 @@ const Button = ({
     disabled,
     isLoading,
 }: ButtonProps) => {
-    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}`
+    const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]}`
 
     return (
         <button
             {...buttonProps}
             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 dc__position-rel dc__capitalize ${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, isLoading })} ${disabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
         >
             {startIcon && <span className={iconClass}>{startIcon}</span>}
-            <span className={`dc__mxw-150 dc__align-left dc__truncate ${visibilityClass}`}>{text}</span>
+            <span className="dc__mxw-150 dc__align-left dc__truncate">{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

@@ -10,6 +10,7 @@
 
     // Custom state for loader
     .loader {
+        visibility: visible;
         position: absolute;
 
         svg,
@@ -165,4 +166,8 @@
             }
         }
     }
+
+    &--loading > * {
+        visibility: hidden;
+    }
 }

src/Shared/Components/Button/utils.ts

@@ -1,5 +1,10 @@
 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]}`
+export const getButtonDerivedClass = ({
+    size,
+    variant,
+    style,
+    isLoading,
+}: Pick<ButtonProps, 'variant' | 'size' | 'style' | 'isLoading'>) =>
+    `button button__${ButtonVariantType[variant]}--${ButtonStyleType[style]} ${BUTTON_SIZE_TO_CLASS_NAME_MAP[size]} ${isLoading ? 'button--loading' : ''}`