function Spinner(props) {
    const { className, style, assistiveText, isVisible, size, variant, type, children } = props;
    const currentSize = getSizeValue(size);

    if (isVisible) {
        if (type === 'arc') {
            return (
                <StyledSpinnerContainer className={className} style={style}>
                    <StyledArcSpinner
                        viewBox={`${0} ${0} ${currentSize} ${currentSize}`}
                        size={size}
                        variant={variant}
                    >
                        <circle
                            className="path"
                            cx={currentSize / 2}
                            cy={currentSize / 2}
                            r={(currentSize - 3) / 2}
                            fill="none"
                            strokeWidth="3"
                        />
                    </StyledArcSpinner>
                    <StyledChildContainer>{children}</StyledChildContainer>
                    <AssistiveText text={assistiveText} />
                </StyledSpinnerContainer>
            );
        }
        return (
            <StyledCircleSpinner className={className} size={size} variant={variant} style={style}>
                <div />
                <div />
                <div />
                <div />
                <div />
                <div />
                <div />
                <div />
                <StyledChildContainer>{children}</StyledChildContainer>
                <AssistiveText text={assistiveText} />
            </StyledCircleSpinner>
        );
    }
    return null;
}
Spinners should be shown when retrieving data or performing slow,
help to reassure the user that the system is actively retrieving data.