Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix looping gallery images fetch

Browse Source 
The gallery could get in a state where it thought it had just reached the end of the list and endlessly fetches more images, if there are no more images to fetch (weird I know).

Add some logic to remove the `end reached` handler when there are no more images to load.
This commit is contained in:
psychedelicious 2023-05-31 23:00:46 +10:00
parent e06ba40795
commit c9e621093e
1 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -1,8 +1,6 @@
import { import {
Box, Box,
ButtonGroup, ButtonGroup,
Checkbox,
CheckboxGroup,
Flex, Flex,
FlexProps, FlexProps,
Grid, Grid,
@ -32,18 +30,13 @@ import {
memo, memo,
useCallback, useCallback,
useEffect, useEffect,
useMemo,
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs'; import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { import { FaImage, FaServer, FaWrench } from 'react-icons/fa';
FaFilter,
FaImage,
FaImages,
FaServer,
FaWrench,
} from 'react-icons/fa';
import { MdPhotoLibrary } from 'react-icons/md'; import { MdPhotoLibrary } from 'react-icons/md';
import HoverableImage from './HoverableImage'; import HoverableImage from './HoverableImage';
@ -53,7 +46,6 @@ import { RootState } from 'app/store/store';
import { Virtuoso, VirtuosoGrid } from 'react-virtuoso'; import { Virtuoso, VirtuosoGrid } from 'react-virtuoso';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { ImageCategory } from 'services/api';
import { import {
ASSETS_CATEGORIES, ASSETS_CATEGORIES,
IMAGE_CATEGORIES, IMAGE_CATEGORIES,
@ -61,7 +53,6 @@ import {
selectImagesAll, selectImagesAll,
} from '../store/imagesSlice'; } from '../store/imagesSlice';
import { receivedPageOfImages } from 'services/thunks/image'; import { receivedPageOfImages } from 'services/thunks/image';
import { capitalize } from 'lodash-es';
const categorySelector = createSelector( const categorySelector = createSelector(
[(state: RootState) => state], [(state: RootState) => state],
@ -144,6 +135,13 @@ const ImageGalleryContent = () => {
dispatch(receivedPageOfImages()); dispatch(receivedPageOfImages());
}, [dispatch]); }, [dispatch]);
const handleEndReached = useMemo(() => {
if (areMoreImagesAvailable && !isLoading) {
return handleLoadMoreImages;
}
return undefined;
}, [areMoreImagesAvailable, handleLoadMoreImages, isLoading]);
const handleChangeGalleryImageMinimumWidth = (v: number) => { const handleChangeGalleryImageMinimumWidth = (v: number) => {
dispatch(setGalleryImageMinimumWidth(v)); dispatch(setGalleryImageMinimumWidth(v));
}; };
@ -172,17 +170,6 @@ const ImageGalleryContent = () => {
} }
}, []); }, []);
const handleEndReached = useCallback(() => {
handleLoadMoreImages();
}, [handleLoadMoreImages]);
const handleCategoriesChanged = useCallback(
(newCategories: ImageCategory[]) => {
dispatch(imageCategoriesChanged(newCategories));
},
[dispatch]
);
const handleClickImagesCategory = useCallback(() => { const handleClickImagesCategory = useCallback(() => {
dispatch(imageCategoriesChanged(IMAGE_CATEGORIES)); dispatch(imageCategoriesChanged(IMAGE_CATEGORIES));
}, [dispatch]); }, [dispatch]);