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}
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 }