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:
2
backend/Cargo.lock
generated
2
backend/Cargo.lock
generated
@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
|
||||
|
||||
[[package]]
|
||||
name = "mangalord"
|
||||
version = "0.113.0"
|
||||
version = "0.114.0"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"argon2",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "mangalord"
|
||||
version = "0.113.0"
|
||||
version = "0.114.0"
|
||||
edition = "2021"
|
||||
default-run = "mangalord"
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mangalord-frontend",
|
||||
"version": "0.113.0",
|
||||
"version": "0.114.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -52,6 +52,7 @@
|
||||
alt=""
|
||||
class="cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{:else}
|
||||
<div class="cover cover-placeholder">
|
||||
|
||||
@@ -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 }
|
||||
|
||||
Reference in New Issue
Block a user