Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 2x 2x 1x 1x | import { HTMLAttributes } from 'react';
// Utils
import { combineClasses } from '@shared/utils';
// Icons
import { LoadingIcon } from '@/components/icons/reacts';
export interface LoadingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
size?: 'sm' | 'default' | 'lg' | 'xl';
center?: boolean;
color?: string;
text?: string;
iconClassName?: string;
textClassName?: string;
}
const LOADING_SIZES = {
sm: 'w-4 h-4',
default: 'w-6 h-6',
lg: 'w-8 h-8',
xl: 'w-12 h-12',
} as const;
const LoadingIndicator = ({
size = 'default',
center = false,
color,
text,
className,
iconClassName,
textClassName,
...props
}: LoadingIndicatorProps) => {
return (
<div
role="status"
aria-label="Loading"
data-testid="loading-indicator"
className={combineClasses(
'flex flex-col items-center z-50',
center && 'justify-center',
className,
)}
{...props}
>
<LoadingIcon
data-testid="loading-icon"
className={combineClasses(
LOADING_SIZES[size],
color && `text-${color}`,
iconClassName,
)}
/>
{text && (
<span
className={combineClasses(
'mt-2 text-sm text-muted-foreground',
textClassName,
)}
>
{text}
</span>
)}
</div>
);
};
LoadingIndicator.displayName = 'LoadingIndicator';
export default LoadingIndicator;
|