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>

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 }) => {
-    const [manga, chapters, bookmarks, readProgress, reaction, similar] = await Promise.all([
+export const load: PageLoad = ({ params }) => {
+    // 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
-        // the detail page, so fall back to an empty list.
+        // Recommendations are non-critical: fall back to an empty list.
         getSimilarMangas(params.id).catch(() => [] as MangaCard[])
-    ]);
-    return {
+    ]).then(([manga, chapters, bookmarks, readProgress, reaction, similar]) => ({
         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[];
+};