Add skeleton loaders to client and product pages
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m16s

This commit is contained in:
Cauê Faleiros
2026-06-29 09:55:19 -03:00
parent a0a1108f3a
commit ff55d0618e
5 changed files with 216 additions and 19 deletions

View File

@@ -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>