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');
+    });
+});