63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
|
|
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-2 ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
}}
|
|
></div>
|
|
);
|
|
export const TaskReportListSkeleton = () => {
|
|
const skeletonRows = 8; // Number of placeholder rows
|
|
|
|
return (
|
|
<div>
|
|
<table className="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Activity</th>
|
|
<th>Assigned</th>
|
|
<th>Completed</th>
|
|
<th>Assign On</th>
|
|
<th>Team</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{[...Array(skeletonRows)].map((_, idx) => (
|
|
<tr key={idx}>
|
|
<td>
|
|
<SkeletonLine height={16} width="70%" />
|
|
<SkeletonLine height={12} width="50%" />
|
|
</td>
|
|
<td>
|
|
<SkeletonLine height={16} width="60%" />
|
|
</td>
|
|
<td>
|
|
<SkeletonLine height={16} width="60%" />
|
|
</td>
|
|
<td>
|
|
<SkeletonLine height={16} width="80%" />
|
|
</td>
|
|
<td className="text-center">
|
|
<div className="d-flex justify-content-center gap-1">
|
|
{[...Array(3)].map((_, i) => (
|
|
<SkeletonLine key={i} height={24} width={24} className="rounded-circle" />
|
|
))}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="d-flex justify-content-end gap-2">
|
|
<SkeletonLine height={24} width="60px" />
|
|
<SkeletonLine height={24} width="60px" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|