From 34c1122e4e0c2c9325a0b056d5226176592d2b04 Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Mon, 6 Jul 2026 19:31:58 +0200
Subject: [PATCH] feat: add MangaGridSkeleton loading placeholder

Composes Skeleton into a cover-grid placeholder that reuses the shared
.manga-grid / .manga-card layout, so it matches the real catalog grid at
every breakpoint and content swaps in without a layout shift.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 backend/Cargo.lock                            |  2 +-
 backend/Cargo.toml                            |  2 +-
 frontend/package.json                         |  2 +-
 .../lib/components/MangaGridSkeleton.svelte   | 35 +++++++++++++++++++
 .../MangaGridSkeleton.svelte.test.ts          | 31 ++++++++++++++++
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/MangaGridSkeleton.svelte
 create mode 100644 frontend/src/lib/components/MangaGridSkeleton.svelte.test.ts

diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index fdd3f4e..906bb04 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.110.0"
+version = "0.111.0"
 dependencies = [
  "anyhow",
  "argon2",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 3342068..1105a02 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.110.0"
+version = "0.111.0"
 edition = "2021"
 default-run = "mangalord"
 
diff --git a/frontend/package.json b/frontend/package.json
index 12b924f..48e1360 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.110.0",
+  "version": "0.111.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/lib/components/MangaGridSkeleton.svelte b/frontend/src/lib/components/MangaGridSkeleton.svelte
new file mode 100644
index 0000000..b3b3666
--- /dev/null
+++ b/frontend/src/lib/components/MangaGridSkeleton.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import Skeleton from './Skeleton.svelte';
+
+    /**
+     * Placeholder for a manga cover grid while it loads. Reuses the global
+     * `.manga-grid` / `.manga-card` shapes (single-sourced in tokens.css) so
+     * it lines up pixel-for-pixel with the real grid at every breakpoint and
+     * content swaps in without a layout shift.
+     */
+    let { count = 12 }: { count?: number } = $props();
+
+    const cards = $derived(Array.from({ length: count }, (_, i) => i));
+</script>
+
+<ul class="manga-grid" data-testid="manga-grid-skeleton" aria-hidden="true">
+    {#each cards as i (i)}
+        <li class="manga-card">
+            <Skeleton height="0" radius="md" />
+            <Skeleton variant="text" width="80%" radius="sm" />
+        </li>
+    {/each}
+</ul>
+
+<style>
+    /* Reserve the 2/3 cover box the same way MangaCard does. `height: 0` on
+       the primitive plus aspect-ratio here gives the cover its shape without
+       hard-coding pixels. */
+    .manga-card :global(.skeleton:first-child) {
+        aspect-ratio: 2 / 3;
+    }
+
+    .manga-card :global(.skeleton.text) {
+        margin-top: var(--space-1);
+    }
+</style>
diff --git a/frontend/src/lib/components/MangaGridSkeleton.svelte.test.ts b/frontend/src/lib/components/MangaGridSkeleton.svelte.test.ts
new file mode 100644
index 0000000..acf3000
--- /dev/null
+++ b/frontend/src/lib/components/MangaGridSkeleton.svelte.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import MangaGridSkeleton from './MangaGridSkeleton.svelte';
+
+afterEach(() => cleanup());
+
+describe('MangaGridSkeleton', () => {
+    it('renders 12 card skeletons by default', () => {
+        render(MangaGridSkeleton);
+        const root = screen.getByTestId('manga-grid-skeleton');
+        expect(root.querySelectorAll('.manga-card').length).toBe(12);
+    });
+
+    it('honours the count prop', () => {
+        render(MangaGridSkeleton, { props: { count: 4 } });
+        const root = screen.getByTestId('manga-grid-skeleton');
+        expect(root.querySelectorAll('.manga-card').length).toBe(4);
+    });
+
+    it('reuses the shared .manga-grid layout class', () => {
+        render(MangaGridSkeleton);
+        expect(screen.getByTestId('manga-grid-skeleton').classList.contains('manga-grid')).toBe(
+            true
+        );
+    });
+
+    it('is decorative so the container announces loading', () => {
+        render(MangaGridSkeleton);
+        expect(screen.getByTestId('manga-grid-skeleton').getAttribute('aria-hidden')).toBe('true');
+    });
+});