48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import React from "react";
|
|
|
|
const SkeletonLine = ({ height = 16, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-1 ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
borderRadius: 4,
|
|
}}
|
|
></div>
|
|
);
|
|
|
|
const VersionListSkeleton = ({ items = 5 }) => {
|
|
return (
|
|
<div className="list-group mx-0">
|
|
{[...Array(items)].map((_, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="list-group-item py-2 border border-bottom border-top-0 border-start-0 border-end-0"
|
|
>
|
|
{/* Top row: document name + version/status */}
|
|
<div className="d-flex w-100 justify-content-between">
|
|
<SkeletonLine width="40%" height={16} />
|
|
<div className="d-flex gap-2">
|
|
<SkeletonLine width="60px" height={14} />
|
|
<SkeletonLine width="80px" height={14} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload by row */}
|
|
<div className="d-flex align-items-center gap-2 mt-2">
|
|
<SkeletonLine width="24px" height="24px" className="rounded-circle" />
|
|
<SkeletonLine width="120px" height={14} />
|
|
</div>
|
|
|
|
{/* Updated at row */}
|
|
<div className="d-flex gap-2 mt-2">
|
|
<SkeletonLine width="150px" height={14} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VersionListSkeleton;
|