Add skeleton loaders to client and product pages
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m16s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m16s
This commit is contained in:
@@ -189,14 +189,29 @@ const RfmSkeleton = () => (
|
||||
{[0, 1, 2].map(row => (
|
||||
<div key={`rfv-matrix-row-skeleton-${row}`} className="contents">
|
||||
{[0, 1, 2, 3].map(column => (
|
||||
<div key={`rfv-matrix-cell-skeleton-${row}-${column}`} className="min-h-28 rounded-xl border border-dark-border bg-dark-input/50 p-3">
|
||||
<div className="skeleton h-2 w-8" />
|
||||
<div className="skeleton mt-5 h-4 w-28" />
|
||||
<div className="skeleton mt-2 h-3 w-36" />
|
||||
<div className="mt-5 grid grid-cols-2 gap-3">
|
||||
<div className="skeleton h-5" />
|
||||
<div className="skeleton h-5" />
|
||||
</div>
|
||||
<div
|
||||
key={`rfv-matrix-cell-skeleton-${row}-${column}`}
|
||||
className={`min-h-28 rounded-xl border border-dark-border bg-dark-input/50 p-3 ${
|
||||
column === 0 ? 'flex flex-col items-center justify-center text-center' : ''
|
||||
}`}
|
||||
>
|
||||
{column === 0 ? (
|
||||
<>
|
||||
<div className="skeleton h-3 w-12" />
|
||||
<div className="skeleton mt-2 h-4 w-12" />
|
||||
<div className="skeleton mt-3 h-3 w-14" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="skeleton h-2 w-8" />
|
||||
<div className="skeleton mt-5 h-4 w-28" />
|
||||
<div className="skeleton mt-2 h-3 w-36" />
|
||||
<div className="mt-5 grid grid-cols-2 gap-3">
|
||||
<div className="skeleton h-5" />
|
||||
<div className="skeleton h-5" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user