41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
|
|
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-2 ${className}`}
|
|
style={{ height, width }}
|
|
></div>
|
|
);
|
|
export const CollectionOverviewSkeleton = () => {
|
|
return (
|
|
<div className="card row p-1">
|
|
|
|
{/* LEFT SIDE */}
|
|
<div className="col-8">
|
|
<div className="">
|
|
|
|
{/* Header */}
|
|
<div className="d-flex align-items-center justify-content-between mb-3">
|
|
<SkeletonLine height={24} width="180px" />
|
|
</div>
|
|
|
|
{/* Due & Collected summary */}
|
|
<div className="d-flex align-items-center text-start px-6 mb-3">
|
|
<SkeletonLine height={16} width="100px" className="me-2" />
|
|
<SkeletonLine height={20} width="120px" className="me-2" />
|
|
<SkeletonLine height={16} width="120px" className="ms-2 me-2" />
|
|
<SkeletonLine height={20} width="120px" />
|
|
</div>
|
|
|
|
{/* Chart Skeleton */}
|
|
<SkeletonLine height={250} width="100%" className="mt-2" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
};
|