feat: enhance Switch component with loading state handling and improved utility functions

Author: AbhishekA1509

src/Shared/Components/Switch/Switch.component.tsx

@@ -8,7 +8,14 @@ import { getUniqueId } from '@Shared/Helpers'
 import { Icon } from '../Icon'
 import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP } from './constants'
 import { SwitchProps } from './types'
-import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
+import {
+    getSwitchContainerClass,
+    getSwitchIconColor,
+    getSwitchThumbClass,
+    getSwitchTrackColor,
+    getThumbPadding,
+    getThumbPosition,
+} from './utils'
 
 const Switch = ({
     ariaLabel,
@@ -40,24 +47,26 @@ const Switch = ({
 
     const showIndeterminateIcon = ariaCheckedValue === 'mixed'
 
-    const renderContent = () => {
-        if (isLoading) {
-            return <Icon name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} />
-        }
-
-        return (
-            <motion.span
-                className={`flex flex-grow-1 ${shape === 'rounded' ? 'p-2 br-12' : 'p-1 br-4'} ${isChecked ? 'right' : 'left'}`}
-                layout
-                animate={{
-                    backgroundColor: getSwitchTrackColor({ shape, variant, isChecked }),
-                }}
-                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-            >
+    const renderContent = () => (
+        <motion.span
+            className={`flex flex-grow-1 ${getThumbPadding({ shape, isLoading })} ${getThumbPosition({ isChecked, isLoading })}`}
+            layout
+            transition={{ ease: 'easeInOut', duration: 0.2 }}
+        >
+            {isLoading ? (
+                <motion.span
+                    transition={{ ease: 'easeInOut', duration: 0.2 }}
+                    layoutId="loader"
+                    className="flex-grow-1 h-100 dc__fill-available-space dc__no-shrink"
+                >
+                    <Icon key="progressing" name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} size={null} />
+                </motion.span>
+            ) : (
                 <motion.span
+                    layoutId="thumb"
                     className={getSwitchThumbClass({ shape, size, showIndeterminateIcon })}
                     layout
-                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                    transition={{ ease: 'easeInOut', duration: 0.2 }}
                 >
                     <AnimatePresence>
                         {showIndeterminateIcon ? (
@@ -84,15 +93,16 @@ const Switch = ({
                                             iconColor,
                                             variant,
                                         })}
+                                        size={null}
                                     />
                                 </motion.span>
                             )
                         )}
                     </AnimatePresence>
                 </motion.span>
-            </motion.span>
-        )
-    }
+            )}
+        </motion.span>
+    )
 
     return (
         <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
@@ -119,7 +129,7 @@ const Switch = ({
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
                     aria-disabled={isDisabled}
-                    className={`p-0-imp h-100 flex flex-grow-1 dc__transparent ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
+                    className={`p-0-imp h-100 flex flex-grow-1 dc__no-border ${shape === 'rounded' ? 'br-12' : 'br-4'} ${getSwitchTrackColor({ shape, variant, isChecked, isLoading })} ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
                     onClick={onChange}
                 >
                     {renderContent()}

src/Shared/Components/Switch/constants.ts

@@ -33,14 +33,14 @@ export const LOADING_COLOR_MAP: Record<SwitchProps['variant'], IconBaseColorType
     positive: 'G500',
 }
 
-export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], `var(--${IconBaseColorType})`> = {
-    theme: 'var(--B500)',
-    positive: 'var(--G500)',
+export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], string> = {
+    theme: 'bcb-5',
+    positive: 'bcg-5',
 }
 
 export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MAP = {
-    theme: 'var(--B300)',
-    positive: 'var(--G300)',
+    theme: 'bcb-3',
+    positive: 'bcg-3',
 }
 
 export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<SwitchProps['size'], string> = {
@@ -57,3 +57,8 @@ export const SWITCH_THUMB_PADDING_MAP: Record<SwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'p-3',
     [ComponentSizeType.small]: 'p-1',
 }
+
+export const THUMB_OUTER_PADDING_MAP: Record<SwitchProps['shape'], string> = {
+    rounded: 'p-2',
+    square: 'p-1',
+}

src/Shared/Components/Switch/utils.ts

@@ -8,6 +8,7 @@ import {
     SQUARE_SWITCH_TRACK_COLOR_MAP,
     SWITCH_HEIGHT_MAP,
     SWITCH_THUMB_PADDING_MAP,
+    THUMB_OUTER_PADDING_MAP,
 } from './constants'
 import { SwitchProps } from './types'
 
@@ -18,9 +19,14 @@ export const getSwitchTrackColor = ({
     shape,
     variant,
     isChecked,
-}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked'>>): `var(--${IconBaseColorType})` => {
+    isLoading,
+}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked' | 'isLoading'>>): string => {
+    if (isLoading) {
+        return 'dc__transparent--unstyled'
+    }
+
     if (!isChecked) {
-        return 'var(--N200)'
+        return 'bcn-2'
     }
 
     return shape === 'rounded' ? ROUNDED_SWITCH_TRACK_COLOR_MAP[variant] : SQUARE_SWITCH_TRACK_COLOR_MAP[variant]
@@ -49,3 +55,22 @@ export const getSwitchIconColor = ({
 
     return iconColor || (variant === 'theme' ? 'B500' : 'G500')
 }
+
+export const getThumbPosition = ({
+    isLoading,
+    isChecked,
+}: Pick<SwitchProps, 'isLoading' | 'isChecked'>): 'left' | 'right' | 'center' => {
+    if (isLoading) {
+        return 'center'
+    }
+
+    return isChecked ? 'right' : 'left'
+}
+
+export const getThumbPadding = ({ shape, isLoading }: Pick<SwitchProps, 'shape' | 'isLoading'>): string => {
+    if (isLoading) {
+        return ''
+    }
+
+    return THUMB_OUTER_PADDING_MAP[shape]
+}