a new image is a new load, so the old one stops being shown

stepping through the carousel looked like the picture lagged a beat behind the
thumbnail strip. the strip was right; the picture was stale.

the renderer already had a spinner and an opacity gate — `loaded` simply was never
CLEARED when `src` changed. that did not matter while a viewer showed one file for
its whole life: the flag went true once and stayed. with a carousel it is the whole
bug, because the gate stays open and the browser goes on painting the previous
photograph until the next has decoded.

zoom, rotation and pan reset with it. they are a view of ONE image, and carrying 3x
and ninety degrees onto the next photograph puts somebody in the corner of a picture
they have not seen yet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
This commit is contained in:
2026-08-29 09:32:12 +01:00
co-authored by Claude Opus 5
parent 53f3ca33b5
commit 990078efce
@@ -77,6 +77,27 @@ export const ImageRenderer = ({ src, fileName }: ImageRendererProps) => {
if (zoom <= 1) setOffset({ x: 0, y: 0 });
}, [zoom]);
/*
A NEW FILE IS A NEW LOAD, and everything about the last one goes.
`loaded` was set once and never cleared, which did not matter while a viewer showed one file for its
whole life. With a carousel it is the bug you see: the flag stays true, the opacity gate stays open,
and the browser goes on painting the PREVIOUS photograph until the next one has decoded. Stepping
through a folder looked like the image lagged a beat behind the strip — the strip was right and the
picture was stale.
Zoom, rotation and pan reset with it. They are a view of one image, and carrying 3x and 90 degrees
onto the next photograph means arriving somewhere nobody asked to be, in the corner of a picture
they have not seen yet.
*/
useEffect(() => {
setLoaded(false);
setError(false);
setZoom(1);
setRotation(0);
setOffset({ x: 0, y: 0 });
}, [src]);
if (error) {
return (
<div className="flex items-center justify-center h-full">