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 | 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x | import React from 'react';
import './Skeleton.css';
interface SkeletonProps {
width?: string;
height?: string;
variant?: 'text' | 'circular' | 'rectangular';
className?: string;
}
/**
* Skeleton loader component for displaying loading placeholders
*/
const Skeleton: React.FC<SkeletonProps> = ({
width = '100%',
height = '20px',
variant = 'rectangular',
className = '',
}) => {
const getVariantClass = () => {
switch (variant) {
case 'text':
return 'skeleton-text';
case 'circular':
return 'skeleton-circular';
case 'rectangular':
default:
return 'skeleton-rectangular';
}
};
return (
<div
className={`skeleton ${getVariantClass()} ${className}`}
style={{ width, height }}
aria-busy="true"
aria-live="polite"
/>
);
};
export default Skeleton;
|