From 3364ea52c9001bfe19292b77283c8dec66797974 Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Mon, 6 Jul 2026 19:41:28 +0200
Subject: [PATCH] feat: async decode for manga cover images

Adds decoding="async" to the MangaCard cover so image decode happens off the
main thread, keeping grid scroll/paint smooth as covers stream in. The 2/3
aspect-ratio already reserves space, so no 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 +-
 frontend/src/lib/components/MangaCard.svelte         |  1 +
 frontend/src/lib/components/MangaCard.svelte.test.ts | 10 ++++++++++
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index b7f8097..0161963 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.113.0"
+version = "0.114.0"
 dependencies = [
  "anyhow",
  "argon2",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index f57864d..b2a1697 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.113.0"
+version = "0.114.0"
 edition = "2021"
 default-run = "mangalord"
 
diff --git a/frontend/package.json b/frontend/package.json
index e4aa2a3..accd90d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.113.0",
+  "version": "0.114.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/lib/components/MangaCard.svelte b/frontend/src/lib/components/MangaCard.svelte
index 7c1770a..0975e36 100644
--- a/frontend/src/lib/components/MangaCard.svelte
+++ b/frontend/src/lib/components/MangaCard.svelte
@@ -52,6 +52,7 @@
                 alt=""
                 class="cover"
                 loading="lazy"
+                decoding="async"
             />
         {:else}
             <div class="cover cover-placeholder">
diff --git a/frontend/src/lib/components/MangaCard.svelte.test.ts b/frontend/src/lib/components/MangaCard.svelte.test.ts
index bfeec21..537dd1b 100644
--- a/frontend/src/lib/components/MangaCard.svelte.test.ts
+++ b/frontend/src/lib/components/MangaCard.svelte.test.ts
@@ -49,6 +49,16 @@ describe('MangaCard badges & overlays', () => {
         expect(screen.queryByTestId('cover-progress')).toBeNull();
     });
 
+    it('renders the cover with lazy loading and async decode to keep grid paint smooth', () => {
+        render(MangaCard, {
+            props: { manga: { ...baseManga, cover_image_path: 'mangas/m1/cover.jpg' } }
+        });
+        const img = document.querySelector('img.cover') as HTMLImageElement;
+        expect(img).not.toBeNull();
+        expect(img.getAttribute('loading')).toBe('lazy');
+        expect(img.getAttribute('decoding')).toBe('async');
+    });
+
     it('renders the progress overlay clamped to 0..1 and reflects the value as a width style', () => {
         const { rerender } = render(MangaCard, {
             props: { manga: baseManga, progress: 0.4 }