From d9ffacc1245845e7e712e52ae6e36d61507e7d74 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Sun, 22 Mar 2026 10:33:38 +0100
Subject: [PATCH] fix: prevent second page flicker in double page mode when
 image is already loaded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skip resetting loading state to true when the blob URL already exists,
avoiding an unnecessary opacity-0 → opacity-100 CSS transition.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/reader/components/PageDisplay.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/reader/components/PageDisplay.tsx b/src/components/reader/components/PageDisplay.tsx
index 1b3f985..3ef857c 100644
--- a/src/components/reader/components/PageDisplay.tsx
+++ b/src/components/reader/components/PageDisplay.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
 
 interface PageDisplayProps {
@@ -22,6 +22,8 @@ export function PageDisplay({
   const [hasError, setHasError] = useState(false);
   const [secondPageLoading, setSecondPageLoading] = useState(true);
   const [secondPageHasError, setSecondPageHasError] = useState(false);
+  const imageBlobUrlsRef = useRef(imageBlobUrls);
+  imageBlobUrlsRef.current = imageBlobUrls;
 
   const handleImageLoad = useCallback(() => {
     setIsLoading(false);
@@ -41,11 +43,11 @@ export function PageDisplay({
     setSecondPageHasError(true);
   }, []);
 
-  // Reset loading when page changes
+  // Reset loading when page changes, but skip if blob URL is already available
   useEffect(() => {
-    setIsLoading(true);
+    setIsLoading(!imageBlobUrlsRef.current[currentPage]);
     setHasError(false);
-    setSecondPageLoading(true);
+    setSecondPageLoading(!imageBlobUrlsRef.current[currentPage + 1]);
     setSecondPageHasError(false);
   }, [currentPage, isDoublePage]);