From 0af8a7521eaa029e903cb9ff62ba452049779891 Mon Sep 17 00:00:00 2001
From: Git Agent <git@readabook.local>
Date: Mon, 24 Aug 2026 15:45:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20lecteur=20CBZ/CBR=20mode=20vertical?=
 =?UTF-8?q?=20=E2=80=94=20images=20masqu=C3=A9es=20avant=20connaissance=20?=
 =?UTF-8?q?des=20dimensions=20(r=C3=A9gression=20#37)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/reader/CbzReader.tsx         | 1 -
 apps/web/src/reader/readerRuntime.test.ts | 8 ++++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/reader/CbzReader.tsx b/apps/web/src/reader/CbzReader.tsx
index b20a999..2c86cd8 100644
--- a/apps/web/src/reader/CbzReader.tsx
+++ b/apps/web/src/reader/CbzReader.tsx
@@ -216,7 +216,6 @@ export function CbzReader({
                 alt={item.name}
                 loading="lazy"
                 style={verticalImageStyle(item.page)}
-                hidden={!imageSizes[item.page]}
                 onLoad={(event) => {
                   setImageSizes((current) => ({
                     ...current,
diff --git a/apps/web/src/reader/readerRuntime.test.ts b/apps/web/src/reader/readerRuntime.test.ts
index 7e85138..dddefe8 100644
--- a/apps/web/src/reader/readerRuntime.test.ts
+++ b/apps/web/src/reader/readerRuntime.test.ts
@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { epubFileName } from "./EpubReader";
 import { pdfDocumentOptions } from "./pdfDocumentOptions";
@@ -204,6 +205,13 @@ describe("reader runtime helpers", () => {
     ).toBe(2);
   });
 
+  it("keeps CBZ vertical page images loadable before their dimensions are known", () => {
+    const source = readFileSync(new URL("./CbzReader.tsx", import.meta.url), "utf8");
+    const verticalBranch = source.slice(source.indexOf('mode === "vertical" ?'), source.indexOf(") : (", source.indexOf('mode === "vertical" ?')));
+
+    expect(verticalBranch).not.toContain('hidden={!imageSizes[item.page]}');
+  });
+
   it("detects fullscreen support and active fullscreen element", () => {
     const fullscreenElement = { requestFullscreen: () => Promise.resolve() } as unknown as HTMLElement;
     const regularElement = {} as HTMLElement;