diff --git a/src/list.tsx b/src/list.tsx index fdc9d20586..eb31075658 100644 --- a/src/list.tsx +++ b/src/list.tsx @@ -27,6 +27,7 @@ import {vars} from './skins/skin-contract.css'; import {applyCssVars} from './utils/css'; import {IconButton, ToggleIconButton} from './icon-button'; import ScreenReaderOnly from './screen-reader-only'; +import Spinner from './spinner'; import type {IconButtonProps, ToggleIconButtonProps} from './icon-button'; import type {TouchableElement, TouchableProps} from './touchable'; @@ -260,6 +261,9 @@ type ControlProps = { value?: boolean; defaultValue?: boolean; onChange?: (checked: boolean) => void; + updatingValue?: { + showSpinner: boolean; + }; }; type BasicRowContentProps = CommonProps; @@ -443,14 +447,14 @@ const RowContent = React.forwardRef((props, r descriptionLinesMax={descriptionLinesMax} detail={detail} danger={danger} - right={right} + right={props.switch?.updatingValue?.showSpinner ? : undefined} rightRef={(node) => { if (node) { // jsdom doesn't support innerText so we fallback to textContent https://github.com/jsdom/jsdom/issues/1245 setRightText(node.innerText || node.textContent || ''); } }} - control={contentProps?.control} + control={props.switch?.updatingValue?.showSpinner ? undefined : contentProps?.control} extra={extra} extraRef={(node) => { if (node) { @@ -458,7 +462,7 @@ const RowContent = React.forwardRef((props, r } }} labelId={contentProps?.labelId} - disabled={disabled} + disabled={disabled || props.switch?.updatingValue !== undefined} withChevron={hasChevron} /> ); @@ -537,6 +541,7 @@ const RowContent = React.forwardRef((props, r aria-label={ariaLabel} aria-labelledby={titleId} onChange={toggle} + aria-busy={props.switch?.updatingValue !== undefined} render={({controlElement}) => (
{controlElement}
)} @@ -549,6 +554,7 @@ const RowContent = React.forwardRef((props, r checked={isChecked} aria-label={ariaLabel} aria-labelledby={titleId} + aria-busy={props.switch?.updatingValue !== undefined} onChange={toggle} render={({controlElement, labelId}) => ( diff --git a/src/switch-component.tsx b/src/switch-component.tsx index 8740499b52..afdc41b612 100644 --- a/src/switch-component.tsx +++ b/src/switch-component.tsx @@ -35,6 +35,7 @@ type PropsRender = { children?: undefined; 'aria-labelledby'?: string; 'aria-label'?: string; + 'aria-busy'?: boolean; dataAttributes?: DataAttributes; }; @@ -48,6 +49,7 @@ type PropsChildren = { render?: undefined; 'aria-labelledby'?: string; 'aria-label'?: string; + 'aria-busy'?: boolean; dataAttributes?: DataAttributes; }; @@ -140,6 +142,7 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => { { e.stopPropagation(); if (!disabled) {