fix: prevent second page flicker in double page mode when image is already loaded
All checks were successful
Build, Push & Deploy / deploy (push) Successful in 5m15s

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>
This commit is contained in:
2026-03-22 10:33:38 +01:00
parent 8cdbebaafb
commit d9ffacc124

View File

@@ -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]);