31 lines
697 B
TypeScript
31 lines
697 B
TypeScript
|
import { Skeleton } from './Skeleton';
|
||
|
|
|
||
|
|
export function LoadingState({
|
||
|
|
label,
|
||
|
|
testid,
|
||
|
|
lines = 3,
|
||
|
|
}: {
|
||
|
|
label?: string;
|
||
|
|
testid?: string;
|
||
|
|
lines?: number;
|
||
|
|
}): JSX.Element {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
data-testid={testid ?? 'loading-state'}
|
||
|
|
className="flex flex-col items-center justify-center gap-3 p-6 w-full"
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-2 w-full max-w-sm">
|
||
|
|
{Array.from({ length: lines }).map((_, i) => (
|
||
|
|
<Skeleton
|
||
|
|
key={i}
|
||
|
|
className={`h-4 ${i === lines - 1 ? 'w-2/3' : 'w-full'}`}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{label && (
|
||
|
|
<p className="text-xs text-text-muted">{label}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|