thegeneralist01/archivr
1
Fork 0
mirror of https://github.com/thegeneralist01/archivr synced 2026-07-21 18:55:36 +02:00
Code Issues Activity

feat(frontend): add SkeletonEntryRow with shimmer animation

Browse source 
Adds a new SkeletonEntryRow component that renders animated shimmer
placeholder cells matching the exact column layout of EntryRow
(col-added, col-title with icon circle, col-type pill, col-size,
col-url). CSS appended to styles.css using existing design tokens
(--paper-2, --line-soft, --paper-3) for the warm-toned shimmer.
This commit is contained in:
TheGeneralist 2026-07-20 13:33:19 +02:00
parent 14fd091d1f
commit 719b176861
Signed by: thegeneralist01
SSH key fingerprint: SHA256:pp9qddbCNmVNoSjevdvQvM5z0DHN7LTa8qBMbcMq/R4
2 changed files with 54 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/components/SkeletonEntryRow.jsx Normal file
View file

@ -0,0 +1,22 @@
export default function SkeletonEntryRow() {
return (
<div className="skeleton-row">
<div className="col-added">
<span className="skeleton-cell" style={{ width: 108, height: 13 }} />
</div>
<div className="col-title" style={{ gap: '0.42em', display: 'flex', alignItems: 'center' }}>
<span className="skeleton-cell" style={{ width: 14, height: 14, borderRadius: '50%', flexShrink: 0 }} />
<span className="skeleton-cell" style={{ width: '58%', height: 13 }} />
</div>
<div className="col-type">
<span className="skeleton-cell" style={{ width: 58, height: 20, borderRadius: 99 }} />
</div>
<div className="col-size">
<span className="skeleton-cell" style={{ width: 44, height: 12 }} />
</div>
<div className="col-url">
<span className="skeleton-cell" style={{ width: '65%', height: 12 }} />
</div>
</div>
)
}

32
frontend/src/styles.css
View file

@ -2694,3 +2694,35 @@ select {
.preview-modal-newtab:hover { background: var(--field); color: var(--ink); }
/* Push content above the fixed AudioBar when it is visible */
body.has-audio-bar { padding-bottom: 56px; }
/* ── Skeleton entry row ─────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
.skeleton-cell {
display: inline-block;
border-radius: 3px;
background: linear-gradient(90deg, var(--paper-2) 25%, var(--line-soft) 50%, var(--paper-2) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
/* Row container — flex row matching #entries-body > div layout */
.skeleton-row {
display: flex;
align-items: center;
background: var(--paper-3);
}
.skeleton-row > div {
padding: 7px 10px;
flex-shrink: 0;
overflow: hidden;
}
.skeleton-row .col-added { padding-left: 22px; }
.skeleton-row > div:last-child { padding-right: 22px; }
@media (pointer: coarse) {
.skeleton-row .col-added { padding-left: 10px; }
}