Fix reader page retry button in continuous reading modes

In these modes the reader does not load leading pages to prevent the resulting layout shift on load.
This behavior prevented the retry button functionality.

Due to the way loading/failed pages are rendered and how the current page is detected, it's possible that the retry button for a leading page is visible, which resulted in showing a retry button without any functionality.

fixes #1088
This commit is contained in:
schroda
2026-05-02 15:24:38 +02:00
parent c068f2fb35
commit e3babfed31
2 changed files with 15 additions and 4 deletions

View File

@@ -75,14 +75,16 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
const showMissingImageIcon = !src.length;
const previousSrc = usePrevious(src);
const [imageSourceUrl, setImageSourceUrl] = useState<string>();
const [imgLoadRetryKey, setImgLoadRetryKey] = useState(0);
const [isLoading, setIsLoading] = useState<boolean>();
const [hasError, setHasError] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const previousSrc = usePrevious(src);
const previousImgLoadRetryKey = usePrevious(imgLoadRetryKey);
const previousRetryKeyPrefix = usePrevious(retryKeyPrefix);
const updateImageState = (loading: boolean, error: boolean = false, aborted: boolean = false) => {
setIsLoading(loading);
setHasError(error);
@@ -105,7 +107,15 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
const didSrcChange = previousSrc !== src;
const isLoadedAndSrcUnchanged = !!imageSourceUrl && !didSrcChange;
if (showMissingImageIcon || !shouldLoad || isLoadedAndSrcUnchanged) {
const isLocalRetry =
hasError && previousImgLoadRetryKey !== undefined && previousImgLoadRetryKey !== imgLoadRetryKey;
const isGlobalRetry =
hasError && previousRetryKeyPrefix !== undefined && previousRetryKeyPrefix !== retryKeyPrefix;
const isRetry = isLocalRetry || isGlobalRetry;
const finalShouldLoad = shouldLoad || isRetry;
if (showMissingImageIcon || !finalShouldLoad || isLoadedAndSrcUnchanged) {
return () => {};
}