streamarr/src/common/components/ui/spinner.tsx
2024-09-10 22:58:35 +02:00

23 lines
814 B
TypeScript

import { mergeProps, splitProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { Spinner as StyledSpinner, type SpinnerProps as StyledSpinnerProps } from './styled/spinner'
export interface SpinnerProps extends StyledSpinnerProps {
/**
* For accessibility, it is important to add a fallback loading text.
* This text will be visible to screen readers.
* @default "Loading..."
*/
label?: string
}
export const Spinner = (props: SpinnerProps) => {
const [_localProps, rootProps] = splitProps(props, ['label'])
const localProps = mergeProps({ label: 'Loading...' }, _localProps)
return (
<StyledSpinner borderBottomColor="transparent" borderLeftColor="transparent" {...rootProps}>
<styled.span srOnly>{localProps.label}</styled.span>
</StyledSpinner>
)
}