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
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:
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useCallback, useEffect } from "react";
|
import { useState, useCallback, useEffect, useRef } from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
interface PageDisplayProps {
|
interface PageDisplayProps {
|
||||||
@@ -22,6 +22,8 @@ export function PageDisplay({
|
|||||||
const [hasError, setHasError] = useState(false);
|
const [hasError, setHasError] = useState(false);
|
||||||
const [secondPageLoading, setSecondPageLoading] = useState(true);
|
const [secondPageLoading, setSecondPageLoading] = useState(true);
|
||||||
const [secondPageHasError, setSecondPageHasError] = useState(false);
|
const [secondPageHasError, setSecondPageHasError] = useState(false);
|
||||||
|
const imageBlobUrlsRef = useRef(imageBlobUrls);
|
||||||
|
imageBlobUrlsRef.current = imageBlobUrls;
|
||||||
|
|
||||||
const handleImageLoad = useCallback(() => {
|
const handleImageLoad = useCallback(() => {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
@@ -41,11 +43,11 @@ export function PageDisplay({
|
|||||||
setSecondPageHasError(true);
|
setSecondPageHasError(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Reset loading when page changes
|
// Reset loading when page changes, but skip if blob URL is already available
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsLoading(true);
|
setIsLoading(!imageBlobUrlsRef.current[currentPage]);
|
||||||
setHasError(false);
|
setHasError(false);
|
||||||
setSecondPageLoading(true);
|
setSecondPageLoading(!imageBlobUrlsRef.current[currentPage + 1]);
|
||||||
setSecondPageHasError(false);
|
setSecondPageHasError(false);
|
||||||
}, [currentPage, isDoublePage]);
|
}, [currentPage, isDoublePage]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user