139 lines
3.8 KiB
JavaScript
139 lines
3.8 KiB
JavaScript
import React from "react";
|
|
|
|
const SkeletonLine = ({ height = 18, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
borderRadius: "4px",
|
|
}}
|
|
></div>
|
|
);
|
|
|
|
export const BranchDetailsSkeleton = () => {
|
|
return (
|
|
<div className="w-100">
|
|
<div className="d-flex mb-3">
|
|
<SkeletonLine height={22} width="280px" />
|
|
</div>
|
|
|
|
<div className="row mb-2">
|
|
<div className="col-4">
|
|
<SkeletonLine height={16} width="70%" />
|
|
</div>
|
|
<div className="col-8">
|
|
<SkeletonLine height={16} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row mb-2">
|
|
<div className="col-4">
|
|
<SkeletonLine height={16} width="70%" />
|
|
</div>
|
|
<div className="col-8">
|
|
<SkeletonLine height={16} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row mb-2">
|
|
<div className="col-4">
|
|
<SkeletonLine height={16} width="70%" />
|
|
</div>
|
|
<div className="col-8">
|
|
<SkeletonLine height={16} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row mb-2">
|
|
<div className="col-4">
|
|
<SkeletonLine height={16} width="70%" />
|
|
</div>
|
|
<div className="col-8">
|
|
<SkeletonLine height={16} width="90%" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row mb-2">
|
|
<div className="col-4">
|
|
<SkeletonLine height={16} width="70%" />
|
|
</div>
|
|
<div className="col-8 d-flex gap-2 align-items-center">
|
|
<SkeletonLine height={16} width="60%" />
|
|
<SkeletonLine height={16} width="20px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const JobDetailsSkeleton = () => {
|
|
return (
|
|
<div className="row text-start">
|
|
<div className="col-12">
|
|
{/* Title */}
|
|
<SkeletonLine height={24} width="50%" />
|
|
|
|
{/* Job ID + Status */}
|
|
<div className="d-flex justify-content-between align-items-start flex-wrap mb-3 mt-2">
|
|
<SkeletonLine height={18} width="30%" />
|
|
<div className="d-flex flex-row gap-2">
|
|
<SkeletonLine height={22} width="70px" />
|
|
<SkeletonLine height={22} width="22px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<SkeletonLine height={40} width="100%" />
|
|
|
|
{/* Created Date */}
|
|
<div className="d-flex my-3">
|
|
<SkeletonLine height={16} width="40%" />
|
|
</div>
|
|
|
|
{/* Start / Due Date */}
|
|
<div className="d-flex justify-content-between mb-4">
|
|
<SkeletonLine height={16} width="50%" />
|
|
<SkeletonLine height={22} width="70px" />
|
|
</div>
|
|
|
|
{/* Branch Name */}
|
|
<div className="d-flex flex-row gap-3 my-2">
|
|
<SkeletonLine height={16} width="30%" />
|
|
<SkeletonLine height={16} width="40%" />
|
|
</div>
|
|
|
|
{/* Created By */}
|
|
<div className="row align-items-center my-3">
|
|
<div className="col-12 col-md-auto mb-2">
|
|
<SkeletonLine height={16} width="80px" />
|
|
</div>
|
|
|
|
<div className="col d-flex align-items-center gap-2">
|
|
<SkeletonLine height={30} width="30px" /> {/* Avatar */}
|
|
<SkeletonLine height={16} width="40%" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Assigned To */}
|
|
<div className="row mt-2">
|
|
<div className="col-12 col-md-auto mb-2">
|
|
<SkeletonLine height={16} width="90px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="mt-4">
|
|
<div className="d-flex gap-3 mb-3">
|
|
<SkeletonLine height={35} width="80px" />
|
|
<SkeletonLine height={35} width="80px" />
|
|
<SkeletonLine height={35} width="80px" />
|
|
</div>
|
|
|
|
<SkeletonLine height={150} width="100%" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|