From c9e621093e7d3c9fa303816905901fae7c3e66d1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 31 May 2023 23:00:46 +1000
Subject: [PATCH] fix(ui): fix looping gallery images fetch

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.
---
 .../components/ImageGalleryContent.tsx        | 31 ++++++-------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index ce7eb00404..77f42a11a6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -1,8 +1,6 @@
 import {
   Box,
   ButtonGroup,
-  Checkbox,
-  CheckboxGroup,
   Flex,
   FlexProps,
   Grid,
@@ -32,18 +30,13 @@ import {
   memo,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
-import {
-  FaFilter,
-  FaImage,
-  FaImages,
-  FaServer,
-  FaWrench,
-} from 'react-icons/fa';
+import { FaImage, FaServer, FaWrench } from 'react-icons/fa';
 import { MdPhotoLibrary } from 'react-icons/md';
 import HoverableImage from './HoverableImage';
 
@@ -53,7 +46,6 @@ import { RootState } from 'app/store/store';
 import { Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { ImageCategory } from 'services/api';
 import {
   ASSETS_CATEGORIES,
   IMAGE_CATEGORIES,
@@ -61,7 +53,6 @@ import {
   selectImagesAll,
 } from '../store/imagesSlice';
 import { receivedPageOfImages } from 'services/thunks/image';
-import { capitalize } from 'lodash-es';
 
 const categorySelector = createSelector(
   [(state: RootState) => state],
@@ -144,6 +135,13 @@ const ImageGalleryContent = () => {
     dispatch(receivedPageOfImages());
   }, [dispatch]);
 
+  const handleEndReached = useMemo(() => {
+    if (areMoreImagesAvailable && !isLoading) {
+      return handleLoadMoreImages;
+    }
+    return undefined;
+  }, [areMoreImagesAvailable, handleLoadMoreImages, isLoading]);
+
   const handleChangeGalleryImageMinimumWidth = (v: number) => {
     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(() => {
     dispatch(imageCategoriesChanged(IMAGE_CATEGORIES));
   }, [dispatch]);