fix(web): re-fetch images on prop change without dropping their blob URLs
- Dominant language
- TypeScript
- Stars
- 156k
- Forks
- 24.6k
- Avg merge
- 22h 9m
- Merged PRs (30d)
- 610
Description
## ImagePreviewer never loads new images when the prop changes while the component stays mounted
`web/app/components/datasets/common/image-previewer/index.tsx` lines 97-112 — the loading `useEffect` has an empty dependency array but reads the `images` prop. So if the previewer instance is reused for a different document or a different set of images, the new images are never fetched. The user can land on a stuck loading state or a 'no image' placeholder while the actual images exist.
A naive fix that simply adds `images` to the dep array is also broken: the same `useEffect` returns a cleanup that revokes every cached blob URL and clears the entire cache, so on every change the cleanup would tear down URLs still needed by the new image list.
### Steps to reproduce
1. Open the image previewer on document A.
2. Without unmounting the previewer, switch to document B.
3. Observe: document B's images never load, and the cache for document A's URLs is wiped if the effect re-runs.
### Expected
When the `images` prop changes, the previewer fetches the new set of images. Blob URLs of still-present images are reused, not revoked. Cleanup runs on unmount only.
### Actual
The loading effect runs only once on mount. New images are not fetched. Any naive dep-array fix would also wipe cached blob URLs on every change, breaking subsequent previews.
### Suggested fix
Split into two effects:
- Loading effect with `[images]` deps, no cleanup.
- Unmount-only effect with `[]` deps that handles `isMounted.current` and the cache cleanup.
Contributor guide
Research direction
Start in web/app/components/datasets/common/image-previewer/index.tsx, especially lines 97-112, and inspect how the loading effect reads images and manages the blob URL cache. Separate prop-change loading from unmount cleanup, then verify that switching between documents fetches new images, reuses URLs for retained images, and only revokes cached URLs on unmount.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100