From 719b1768614bc48eaec3071344bddebc6883cdb3 Mon Sep 17 00:00:00 2001
From: TheGeneralist <180094941+thegeneralist01@users.noreply.github.com>
Date: Mon, 20 Jul 2026 13:33:19 +0200
Subject: [PATCH] feat(frontend): add SkeletonEntryRow with shimmer animation

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.
---
 frontend/src/components/SkeletonEntryRow.jsx | 22 ++++++++++++++
 frontend/src/styles.css                      | 32 ++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/components/SkeletonEntryRow.jsx

diff --git a/frontend/src/components/SkeletonEntryRow.jsx b/frontend/src/components/SkeletonEntryRow.jsx
new file mode 100644
index 0000000..b25e2d8
--- /dev/null
+++ b/frontend/src/components/SkeletonEntryRow.jsx
@@ -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>
+  )
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cb5b7d2..9b8fe4f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -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; }
+}