feat: results skeleton on the search page

The search loader now awaits only the chip cloud (its auth gate) and streams the view-specific results, so switching tag / view / sort / text shows a SearchResultsSkeleton in place of the frozen previous list until the query resolves. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-07 07:14:43 +02:00
parent f1e66141f4
commit 5b51bcf056
8 changed files with 262 additions and 107 deletions
--- a/frontend/e2e/search-skeleton.spec.ts
+++ b/frontend/e2e/search-skeleton.spec.ts
@@ -0,0 +1,74 @@
+import { test, expect, type Page } from './fixtures';
+
+// The search page streams its results: the chip cloud / controls stay put
+// while a re-query shows a results skeleton, which then swaps for the list.
+
+const mangaId = 'a9999999-9999-9999-9999-999999999999';
+const chapterId = 'c9999999-9999-9999-9999-999999999999';
+const pageId = 'p11111111-1111-1111-1111-111111111111';
+
+async function mockCommon(page: Page) {
+    await page.route('**/api/v1/auth/config', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ self_register_enabled: true, private_mode: false })
+        })
+    );
+    await page.route('**/api/v1/auth/me', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ user: { id: 'u1', username: 'tester', created_at: '2026-01-01T00:00:00Z', is_admin: false } })
+        })
+    );
+    await page.route('**/api/v1/auth/me/preferences', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: '{}' })
+    );
+    await page.route('**/api/v1/me/page-tags/distinct*', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [{ tag: 'funny', count: 38 }] })
+        })
+    );
+    await page.route('**/api/v1/files/**', (r) => r.fulfill({ status: 200, body: '' }));
+}
+
+test('shows a results skeleton while the tagged pages stream, then the list', async ({ page }) => {
+    await mockCommon(page);
+
+    let release: () => void = () => {};
+    const gate = new Promise<void>((resolve) => {
+        release = resolve;
+    });
+    await page.route('**/api/v1/me/page-tags?**', async (route) => {
+        await gate;
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                items: [
+                    {
+                        tag: 'funny', page_id: pageId, chapter_id: chapterId, manga_id: mangaId,
+                        page_number: 5, chapter_number: 1, chapter_title: null, manga_title: 'Berserk',
+                        storage_key: `mangas/${mangaId}/chapters/${chapterId}/pages/0005.png`,
+                        tagged_at: '2026-01-01T00:00:00Z'
+                    }
+                ],
+                page: { limit: 100, offset: 0, total: 1 }
+            })
+        });
+    });
+
+    await page.goto('/search?tag=funny');
+    // The chip cloud / active tag renders immediately (distinct resolved).
+    await expect(page.getByTestId('search-active-tag')).toBeVisible();
+    // Results skeleton while the tagged-pages query is pending.
+    await expect(page.getByTestId('search-results-skeleton')).toBeVisible();
+    await expect(page.getByTestId('search-pages-list')).toHaveCount(0);
+
+    release();
+    await expect(page.getByTestId('search-pages-list')).toContainText('Berserk');
+    await expect(page.getByTestId('search-results-skeleton')).toHaveCount(0);
+});