github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): sometimes images added to gallery show as placeholder only

Browse Source 
The range-based fetching logic had a subtle bug - it didn't keep track
of what the _current_ visible range is - only the ranges that the user
last scrolled to.

When an image was added to the gallery, the logic saw that the images
had changed, but thought it had already loaded everything it needed to,
so it didn't load the new image.

The updated logic tracks the current visible range separately from the
accumulated scroll ranges to address this issue.
This commit is contained in:
psychedelicious
2025-07-10 13:29:43 +10:00
parent 2152ca092c
commit b1193022f7
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/gallery/hooks/useRangeBasedImageFetching.ts
View File

@@ -40,6 +40,7 @@ export const useRangeBasedImageFetching = ({
}: UseRangeBasedImageFetchingArgs): UseRangeBasedImageFetchingReturn => {
const store = useAppStore();
const [getImageDTOsByNames] = useGetImageDTOsByNamesMutation();
const [lastRange, setLastRange] = useState<ListRange | null>(null);
const [pendingRanges, setPendingRanges] = useState<ListRange[]>([]);
const fetchImages = useCallback(
@@ -61,12 +62,14 @@ export const useRangeBasedImageFetching = ({
const throttledFetchImages = useThrottledCallback(fetchImages, 500);
const onRangeChanged = useCallback((range: ListRange) => {
setLastRange(range);
setPendingRanges((prev) => [...prev, range]);
}, []);
useEffect(() => {
throttledFetchImages(pendingRanges, imageNames);
}, [imageNames, pendingRanges, throttledFetchImages]);
const combinedRanges = lastRange ? [...pendingRanges, lastRange] : pendingRanges;
throttledFetchImages(combinedRanges, imageNames);
}, [imageNames, lastRange, pendingRanges, throttledFetchImages]);
return {
onRangeChanged,