feat: loading skeleton on the manga detail page

The detail loader now streams its six-call bundle instead of blocking
navigation on it. The page component is a thin {#await} wrapper: it shows a
MangaDetailSkeleton (cover + meta + chapter rows) while the bundle loads,
renders the extracted DetailView once resolved, and shows an inline
not-found on a 404 (previously the framework error page). Extracting
DetailView also makes it remount per navigation, so its tag/bookmark/reaction
state re-seeds cleanly on manga-to-manga moves.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

backend/Cargo.lock

@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.121.0"
+version = "0.122.0"
 dependencies = [
  "anyhow",
  "argon2",

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.121.0"
+version = "0.122.0"
 edition = "2021"
 default-run = "mangalord"
 

frontend/e2e/detail-skeleton.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect, type Page } from './fixtures';
+
+// The manga detail page streams its data bundle: a MangaDetailSkeleton shows
+// while the six calls load, then DetailView swaps in. A missing manga (404)
+// resolves to an inline not-found instead of the happy-path markup.
+
+const mangaId = 'f1111111-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: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
+    );
+    await page.route('**/api/v1/auth/me/preferences', (r) =>
+        r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
+    );
+    await page.route('**/api/v1/me/bookmarks*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } }) })
+    );
+    await page.route(`**/api/v1/mangas/${mangaId}/chapters*`, (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } }) })
+    );
+    await page.route(`**/api/v1/mangas/${mangaId}/similar`, (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [] }) })
+    );
+    await page.route(`**/api/v1/me/read-progress/${mangaId}`, (r) =>
+        r.fulfill({ status: 404, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
+    );
+    await page.route(`**/api/v1/me/reactions/${mangaId}`, (r) =>
+        r.fulfill({ status: 404, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
+    );
+}
+
+test('shows a detail skeleton while the bundle streams, then the page', async ({ page }) => {
+    await mockCommon(page);
+
+    let release: () => void = () => {};
+    const gate = new Promise<void>((resolve) => {
+        release = resolve;
+    });
+    await page.route(`**/api/v1/mangas/${mangaId}`, async (route) => {
+        await gate;
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                id: mangaId, title: 'Berserk', status: 'ongoing', alt_titles: [], description: null,
+                cover_image_path: null, created_at: '2026-01-01T00:00:00Z', updated_at: '2026-01-01T00:00:00Z',
+                authors: [], genres: [], tags: [], content_warnings: [], chapter_storage_bytes: 0
+            })
+        });
+    });
+
+    await page.goto(`/manga/${mangaId}`);
+    await expect(page.getByTestId('manga-detail-skeleton')).toBeVisible();
+    await expect(page.getByTestId('manga-title')).toHaveCount(0);
+
+    release();
+    await expect(page.getByTestId('manga-title')).toHaveText('Berserk');
+    await expect(page.getByTestId('manga-detail-skeleton')).toHaveCount(0);
+});
+
+test('renders an inline not-found for a missing manga (404)', async ({ page }) => {
+    await mockCommon(page);
+    await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
+        route.fulfill({ status: 404, contentType: 'application/json', body: JSON.stringify({ error: { code: 'not_found', message: 'no' } }) })
+    );
+
+    await page.goto(`/manga/${mangaId}`);
+    await expect(page.getByTestId('detail-error')).toContainText('Manga not found');
+});

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.121.0",
+  "version": "0.122.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/components/MangaDetailSkeleton.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import Skeleton from './Skeleton.svelte';
+
+    /**
+     * Placeholder for the manga detail page while its data streams in. Mirrors
+     * the desktop overview (cover + meta column) and the chapter list so the
+     * page keeps its shape and swaps in without a big layout shift.
+     */
+    let { chapters = 6 }: { chapters?: number } = $props();
+</script>
+
+<div data-testid="manga-detail-skeleton" aria-hidden="true">
+    <div class="overview">
+        <div class="cover">
+            <Skeleton aspectRatio="2 / 3" radius="md" />
+        </div>
+        <div class="meta">
+            <Skeleton variant="text" width="70%" height="1.6rem" radius="sm" />
+            <Skeleton variant="text" width="40%" radius="sm" />
+            <div class="chips">
+                {#each Array(4) as _}
+                    <Skeleton width="72px" height="1.6rem" radius="pill" />
+                {/each}
+            </div>
+            <Skeleton variant="text" width="100%" radius="sm" />
+            <Skeleton variant="text" width="92%" radius="sm" />
+            <Skeleton variant="text" width="60%" radius="sm" />
+        </div>
+    </div>
+
+    <Skeleton variant="text" width="8rem" height="1.3rem" radius="sm" />
+    <ol class="chapter-list">
+        {#each Array(chapters) as _}
+            <li><Skeleton variant="text" width="100%" height="1.1rem" radius="sm" /></li>
+        {/each}
+    </ol>
+</div>
+
+<style>
+    .overview {
+        display: grid;
+        grid-template-columns: minmax(0, 200px) 1fr;
+        gap: var(--space-4);
+        align-items: start;
+        margin-bottom: var(--space-6);
+    }
+
+    /* Match the real overview: stack on phones, but keep the cover from
+       ballooning to full width. */
+    @media (max-width: 640px) {
+        .overview {
+            grid-template-columns: minmax(0, 1fr);
+        }
+        .cover {
+            max-width: 160px;
+        }
+    }
+
+    .meta {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        min-width: 0;
+    }
+
+    .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-2);
+    }
+
+    .chapter-list {
+        list-style: none;
+        padding: 0;
+        margin: var(--space-3) 0 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+    }
+
+    .chapter-list li {
+        padding: var(--space-2) 0;
+        border-top: 1px solid var(--border);
+    }
+</style>

frontend/src/lib/components/MangaDetailSkeleton.svelte.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import MangaDetailSkeleton from './MangaDetailSkeleton.svelte';
+
+afterEach(() => cleanup());
+
+describe('MangaDetailSkeleton', () => {
+    it('renders the overview + a default of 6 chapter-row placeholders', () => {
+        render(MangaDetailSkeleton);
+        const root = screen.getByTestId('manga-detail-skeleton');
+        expect(root.querySelector('.overview')).not.toBeNull();
+        expect(root.querySelectorAll('.chapter-list li').length).toBe(6);
+    });
+
+    it('honours the chapters prop', () => {
+        render(MangaDetailSkeleton, { props: { chapters: 3 } });
+        expect(
+            screen.getByTestId('manga-detail-skeleton').querySelectorAll('.chapter-list li').length
+        ).toBe(3);
+    });
+
+    it('is decorative (aria-hidden)', () => {
+        render(MangaDetailSkeleton);
+        expect(screen.getByTestId('manga-detail-skeleton').getAttribute('aria-hidden')).toBe('true');
+    });
+});

frontend/src/routes/manga/[id]/+page.ts

@@ -4,30 +4,34 @@ import { listMyBookmarksOrEmpty } from '$lib/api/bookmarks';
 import { getMyReadProgressForManga } from '$lib/api/read_progress';
 import { getMyReactionForManga } from '$lib/api/reactions';
 import type { PageLoad } from './$types';
+import type { DetailData } from './types';
 
 export const ssr = false;
 
-export const load: PageLoad = async ({ params }) => {
+export const load: PageLoad = ({ params }) => {
-    const [manga, chapters, bookmarks, readProgress, reaction, similar] = await Promise.all([
+    // Streamed (the load doesn't await) so the page renders a
+    // MangaDetailSkeleton while the bundle loads instead of blocking
+    // navigation on all six calls. A getManga 404 / any hard failure rejects
+    // the bundle and is handled by the page's {:catch}.
+    const bundle: Promise<DetailData> = Promise.all([
         getManga(params.id),
         listChapters(params.id),
         listMyBookmarksOrEmpty(),
-        // Null when guest or never-read — page handles both cases.
+        // Null when guest or never-read — the page handles both cases.
         getMyReadProgressForManga(params.id),
-        // Null when guest or not reacted — seeds the like/dislike toggle.
         // Non-critical: any failure degrades to an unset toggle, never a
         // broken page.
         getMyReactionForManga(params.id).catch(() => null),
-        // Recommendations are non-critical: a failure here must not break
+        // Recommendations are non-critical: fall back to an empty list.
-        // the detail page, so fall back to an empty list.
         getSimilarMangas(params.id).catch(() => [] as MangaCard[])
-    ]);
+    ]).then(([manga, chapters, bookmarks, readProgress, reaction, similar]) => ({
-    return {
         manga,
         chapters: chapters.items,
         bookmarks: bookmarks.items,
         readProgress,
         reaction,
         similar
-    };
+    }));
+
+    return { bundle };
 };

frontend/src/routes/manga/[id]/types.ts

@@ -0,0 +1,19 @@
+import type { MangaCard, MangaDetail } from '$lib/api/mangas';
+import type { Chapter } from '$lib/api/chapters';
+import type { Bookmark } from '$lib/api/bookmarks';
+import type { ReadProgressForManga } from '$lib/api/read_progress';
+import type { Reaction } from '$lib/api/reactions';
+
+/**
+ * The manga detail bundle. Streamed from the loader (see +page.ts) and passed
+ * to DetailView once resolved, so the page can render a skeleton while it
+ * loads. Shape matches the loader's previous flat return.
+ */
+export type DetailData = {
+    manga: MangaDetail;
+    chapters: Chapter[];
+    bookmarks: Bookmark[];
+    readProgress: ReadProgressForManga | null;
+    reaction: Reaction | null;
+    similar: MangaCard[];
+};