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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user