import { clsx } from 'clsx';
import * as styles from '#/components/CenteredSpinner.css';
import { Spinner } from '#/components/Spinner';
import type { iconSize } from '#/styles/tokens.css';
type CenteredSpinnerProps = {
/** Accessible label announced by the spinner's `progressbar` role (e.g. "Loading GIFs"). */
label: string;
/** Icon size token forwarded to the {@link Spinner}. */
size?: keyof typeof iconSize;
/** Grow to fill a flex-column parent so the spinner centers vertically in an empty region. */
fill?: boolean;
};
/** A {@link Spinner} centered in its own box, tinted with the themed muted text color. */
export function CenteredSpinner({ label, size, fill = false }: CenteredSpinnerProps) {
return (
<div className={clsx(styles.center, fill && styles.fill)}>
<Spinner color="default" label={label} size={size} />
</div>
);
}