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>
This commit is contained in:
MechaCat02
2026-07-06 19:41:28 +02:00
parent def97d3087
commit 3364ea52c9
5 changed files with 14 additions and 3 deletions

2
backend/Cargo.lock generated
View File

@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
[[package]]
name = "mangalord"
version = "0.113.0"
version = "0.114.0"
dependencies = [
"anyhow",
"argon2",

View File

@@ -1,6 +1,6 @@
[package]
name = "mangalord"
version = "0.113.0"
version = "0.114.0"
edition = "2021"
default-run = "mangalord"

View File

@@ -1,6 +1,6 @@
{
"name": "mangalord-frontend",
"version": "0.113.0",
"version": "0.114.0",
"private": true,
"type": "module",
"scripts": {

View File

@@ -52,6 +52,7 @@
alt=""
class="cover"
loading="lazy"
decoding="async"
/>
{:else}
<div class="cover cover-placeholder">

View File

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