marco.pms.web/src/components/Charts/ProjectCompletionChartSkeleton.jsx

33 lines
1.0 KiB
JavaScript

import React from "react";
const ProjectCompletionChartSkeleton = () => {
return (
<div className="card h-100">
<div className="card-header d-flex align-items-start justify-content-between">
<div className="card-title mb-0 text-start">
<h5 className="mb-1 fw-bold placeholder-glow">
<span className="placeholder col-6 bg-light"></span>
</h5>
<p className="card-subtitle placeholder-glow">
<span className="placeholder col-8 bg-light"></span>
</p>
</div>
</div>
{/* Keep a fixed height so card doesn't shrink */}
<div className="card-body" >
<div className="placeholder-glow">
{Array.from({ length: 5 }).map((_, i) => (
<div
key={i}
className="placeholder col-12 mb-2 bg-light"
style={{ height: "20px", borderRadius: "4px" }}
></div>
))}
</div>
</div>
</div>
);
};
export default ProjectCompletionChartSkeleton;