ui: show spinner for pending captures

frontend/src/components/EntriesView.jsx

@@ -16,7 +16,7 @@ export default function EntriesView({ entries, selectedUids, onRowClick, archive
         </div>
         <div id="entries-body">
           {pendingCaptures.filter(c => c.archiveId === archiveId).reverse().map(cap => (
-            <SkeletonEntryRow key={cap.id} />
+            <SkeletonEntryRow key={cap.id} locator={cap.locator} />
           ))}
           {entries.map((entry, idx) => (
             <EntryRow

frontend/src/components/SkeletonEntryRow.jsx

@@ -1,23 +1,37 @@
-export default function SkeletonEntryRow() {
-  return (
-    <div className="skeleton-row">
-      <div className="col-check" aria-hidden="true" />
-      <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>
-  )
+const COLLECTION_MARKERS = [
+  'list=',
+  '/playlist/',
+  '/channel/',
+  'yt:playlist:',
+  'yt:channel:',
+  'ytm:playlist:',
+  'spotify:playlist:',
+  'spotify:album:',
+];
+
+function isCollectionLocator(locator) {
+  const normalized = locator.toLowerCase();
+  return COLLECTION_MARKERS.some(marker => normalized.includes(marker));
+}
+
+function truncateLocator(locator) {
+  return locator.length > 80 ? `${locator.slice(0, 79)}…` : locator;
+}
+
+export default function SkeletonEntryRow({ locator = '' }) {
+  const locatorText = String(locator);
+  const isCollection = isCollectionLocator(locatorText);
+
+  return (
+    <div className="in-progress-entry-row" role="status" aria-live="polite">
+      <span className="cap-spinner in-progress-entry-row__spinner" aria-hidden="true" />
+      <span className="in-progress-entry-row__locator" title={locatorText}>
+        {truncateLocator(locatorText)}
+      </span>
+      <span className="in-progress-entry-row__status">
+        Archiving…
+        {isCollection && <span className="in-progress-entry-row__kind">(playlist)</span>}
+      </span>
+    </div>
+  );
 }

frontend/src/components/SkeletonEntryRow.stories.jsx

@@ -0,0 +1,31 @@
+import SkeletonEntryRow from './SkeletonEntryRow';
+
+export default {
+  component: SkeletonEntryRow,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+};
+
+function PendingRows({ locators }) {
+  return (
+    <div className="entry-table">
+      <div id="entries-body">
+        {locators.map(locator => (
+          <SkeletonEntryRow key={locator} locator={locator} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const Examples = {
+  render: () => (
+    <PendingRows
+      locators={[
+        'https://example.com/articles/a-small-and-useful-page',
+        'https://www.youtube.com/watch?v=abc123&list=PL1234567890',
+        'tweet:1891234567890123456',
+      ]}
+    />
+  ),
+};

frontend/src/components/SkeletonEntryRow.test.jsx

@@ -0,0 +1,43 @@
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import SkeletonEntryRow from './SkeletonEntryRow';
+
+describe('SkeletonEntryRow', () => {
+  test('renders a compact archiving status row for a locator', () => {
+    const markup = renderToStaticMarkup(
+      <SkeletonEntryRow locator="tweet:1891234567890123456" />,
+    );
+
+    expect(markup).toContain('in-progress-entry-row__spinner');
+    expect(markup).toContain('tweet:1891234567890123456');
+    expect(markup).toContain('Archiving…');
+    expect(markup).not.toContain('(playlist)');
+  });
+
+  test('labels playlist and channel locators', () => {
+    const collectionLocators = [
+      'https://www.youtube.com/watch?v=abc123&list=PL123',
+      'https://www.youtube.com/playlist/PL123',
+      'https://www.youtube.com/channel/UC123',
+      'yt:playlist:PL123',
+      'yt:channel:UC123',
+      'ytm:playlist:PL123',
+      'spotify:playlist:123',
+      'spotify:album:123',
+    ];
+
+    for (const locator of collectionLocators) {
+      const markup = renderToStaticMarkup(<SkeletonEntryRow locator={locator} />);
+      expect(markup).toContain('(playlist)');
+    }
+  });
+
+  test('truncates long locators to 80 displayed characters', () => {
+    const locator = 'x'.repeat(100);
+    const markup = renderToStaticMarkup(<SkeletonEntryRow locator={locator} />);
+    const visibleLocator = markup.match(/in-progress-entry-row__locator"[^>]*>(.*?)<\/span>/)?.[1];
+
+    expect(visibleLocator).toBe(`${'x'.repeat(79)}…`);
+  });
+});