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 && ( + } + variant="unstyled" + onClick={handleLoadMoreImages} + boxSize={16} + sx={nextPrevButtonStyles} + /> + )} );