From 2c956806d7dd98e4135916b5cd986a927be9ce5c Mon Sep 17 00:00:00 2001
From: mickr777 <115216705+mickr777@users.noreply.github.com>
Date: Sat, 8 Jul 2023 20:19:22 +1000
Subject: [PATCH 1/2] Update NextPrevImageButtons.tsx

---
 .../components/NextPrevImageButtons.tsx       | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
index 69dc1b2b19..fa8b9766a1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { clamp, isEqual } from 'lodash-es';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+import { FaAngleLeft, FaAngleRight, FaRedo } from 'react-icons/fa';
 import { stateSelector } from 'app/store/store';
 import {
   imageSelected,
@@ -12,6 +12,7 @@ import {
 } from 'features/gallery/store/gallerySlice';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { selectFilteredImages } from 'features/gallery/store/gallerySlice';
+import { receivedPageOfImages } from 'services/api/thunks/image';
 
 const nextPrevButtonTriggerAreaStyles: ChakraProps['sx'] = {
   height: '100%',
@@ -102,6 +103,14 @@ const NextPrevImageButtons = () => {
     nextImageId && dispatch(imageSelected(nextImageId));
   }, [dispatch, nextImageId]);
 
+  const handleLoadMoreImages = useCallback(() => {
+    dispatch(
+      receivedPageOfImages({
+        is_intermediate: false,
+      })
+    );
+  }, [dispatch]);
+
   useHotkeys(
     'left',
     () => {
@@ -164,6 +173,16 @@ const NextPrevImageButtons = () => {
             sx={nextPrevButtonStyles}
           />
         )}
+        {shouldShowNextPrevButtons && isOnLastImage && (
+          <IconButton
+            aria-label={t('accessibility.loadMore')}
+            icon={<FaRedo size={42} />}
+            variant="unstyled"
+            onClick={handleLoadMoreImages}
+            boxSize={16}
+            sx={nextPrevButtonStyles}
+          />
+        )}
       </Grid>
     </Flex>
   );

From 3001e4c9470309d5a201cb8be69be44c824446c5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 9 Jul 2023 00:26:49 +1000
Subject: [PATCH 2/2] feat(ui): update right arrow gallery load more

- add hotkey support
- add loading state
- only show if there are more images to load
---
 .../gallery/components/ImageGalleryGrid.tsx   | 13 ++-
 .../components/NextPrevImageButtons.tsx       | 81 ++++++++++++++-----
 2 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryGrid.tsx
index 3578b57364..c7d4e5f0f8 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryGrid.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryGrid.tsx
@@ -57,6 +57,7 @@ const selector = createSelector(
       images,
       allImagesTotal,
       isLoading,
+      isFetching,
       categories,
       selectedBoardId,
     };
@@ -82,8 +83,14 @@ const ImageGalleryGrid = () => {
     },
   });
 
-  const { images, isLoading, allImagesTotal, categories, selectedBoardId } =
-    useAppSelector(selector);
+  const {
+    images,
+    isLoading,
+    isFetching,
+    allImagesTotal,
+    categories,
+    selectedBoardId,
+  } = useAppSelector(selector);
 
   const { selectedBoard } = useListAllBoardsQuery(undefined, {
     selectFromResult: ({ data }) => ({
@@ -176,7 +183,7 @@ const ImageGalleryGrid = () => {
         <IAIButton
           onClick={handleLoadMoreImages}
           isDisabled={!areMoreAvailable}
-          isLoading={isLoading}
+          isLoading={isFetching}
           loadingText="Loading"
           flexShrink={0}
         >
diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
index fa8b9766a1..4177db9a1b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
@@ -1,17 +1,17 @@
-import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react';
+import { ChakraProps, Flex, Grid, IconButton, Spinner } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { clamp, isEqual } from 'lodash-es';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { FaAngleLeft, FaAngleRight, FaRedo } from 'react-icons/fa';
 import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   imageSelected,
+  selectFilteredImages,
   selectImagesById,
 } from 'features/gallery/store/gallerySlice';
+import { clamp, isEqual } from 'lodash-es';
+import { useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { selectFilteredImages } from 'features/gallery/store/gallerySlice';
+import { useTranslation } from 'react-i18next';
+import { FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { receivedPageOfImages } from 'services/api/thunks/image';
 
 const nextPrevButtonTriggerAreaStyles: ChakraProps['sx'] = {
@@ -27,6 +27,7 @@ const nextPrevButtonStyles: ChakraProps['sx'] = {
 export const nextPrevImageButtonsSelector = createSelector(
   [stateSelector, selectFilteredImages],
   (state, filteredImages) => {
+    const { total, isFetching } = state.gallery;
     const lastSelectedImage =
       state.gallery.selection[state.gallery.selection.length - 1];
 
@@ -64,6 +65,8 @@ export const nextPrevImageButtonsSelector = createSelector(
       isOnFirstImage: currentImageIndex === 0,
       isOnLastImage:
         !isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
+      areMoreImagesAvailable: total > imagesLength,
+      isFetching,
       nextImage,
       prevImage,
       nextImageId,
@@ -81,8 +84,14 @@ const NextPrevImageButtons = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const { isOnFirstImage, isOnLastImage, nextImageId, prevImageId } =
-    useAppSelector(nextPrevImageButtonsSelector);
+  const {
+    isOnFirstImage,
+    isOnLastImage,
+    nextImageId,
+    prevImageId,
+    areMoreImagesAvailable,
+    isFetching,
+  } = useAppSelector(nextPrevImageButtonsSelector);
 
   const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
     useState<boolean>(false);
@@ -122,9 +131,21 @@ const NextPrevImageButtons = () => {
   useHotkeys(
     'right',
     () => {
-      handleNextImage();
+      if (isOnLastImage && areMoreImagesAvailable && !isFetching) {
+        handleLoadMoreImages();
+        return;
+      }
+      if (!isOnLastImage) {
+        handleNextImage();
+      }
     },
-    [nextImageId]
+    [
+      nextImageId,
+      isOnLastImage,
+      areMoreImagesAvailable,
+      handleLoadMoreImages,
+      isFetching,
+    ]
   );
 
   return (
@@ -173,16 +194,34 @@ const NextPrevImageButtons = () => {
             sx={nextPrevButtonStyles}
           />
         )}
-        {shouldShowNextPrevButtons && isOnLastImage && (
-          <IconButton
-            aria-label={t('accessibility.loadMore')}
-            icon={<FaRedo size={42} />}
-            variant="unstyled"
-            onClick={handleLoadMoreImages}
-            boxSize={16}
-            sx={nextPrevButtonStyles}
-          />
-        )}
+        {shouldShowNextPrevButtons &&
+          isOnLastImage &&
+          areMoreImagesAvailable &&
+          !isFetching && (
+            <IconButton
+              aria-label={t('accessibility.loadMore')}
+              icon={<FaAngleDoubleRight size={64} />}
+              variant="unstyled"
+              onClick={handleLoadMoreImages}
+              boxSize={16}
+              sx={nextPrevButtonStyles}
+            />
+          )}
+        {shouldShowNextPrevButtons &&
+          isOnLastImage &&
+          areMoreImagesAvailable &&
+          isFetching && (
+            <Flex
+              sx={{
+                w: 16,
+                h: 16,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Spinner opacity={0.5} size="xl" />
+            </Flex>
+          )}
       </Grid>
     </Flex>
   );