diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx index 72f2dcf893..52e26c55e7 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx @@ -54,44 +54,44 @@ const CurrentImagePreview = () => { shouldAntialiasProgressImage, } = useAppSelector(imagesSelector); - // const { - // handlePrevImage, - // handleNextImage, - // prevImageId, - // nextImageId, - // isOnLastImage, - // handleLoadMoreImages, - // areMoreImagesAvailable, - // isFetching, - // } = useNextPrevImage(); + const { + handlePrevImage, + handleNextImage, + prevImageId, + nextImageId, + isOnLastImage, + handleLoadMoreImages, + areMoreImagesAvailable, + isFetching, + } = useNextPrevImage(); - // useHotkeys( - // 'left', - // () => { - // handlePrevImage(); - // }, - // [prevImageId] - // ); + useHotkeys( + 'left', + () => { + handlePrevImage(); + }, + [prevImageId] + ); - // useHotkeys( - // 'right', - // () => { - // if (isOnLastImage && areMoreImagesAvailable && !isFetching) { - // handleLoadMoreImages(); - // return; - // } - // if (!isOnLastImage) { - // handleNextImage(); - // } - // }, - // [ - // nextImageId, - // isOnLastImage, - // areMoreImagesAvailable, - // handleLoadMoreImages, - // isFetching, - // ] - // ); + useHotkeys( + 'right', + () => { + if (isOnLastImage && areMoreImagesAvailable && !isFetching) { + handleLoadMoreImages(); + return; + } + if (!isOnLastImage) { + handleNextImage(); + } + }, + [ + nextImageId, + isOnLastImage, + areMoreImagesAvailable, + handleLoadMoreImages, + isFetching, + ] + ); const { currentData: imageDTO, @@ -213,7 +213,7 @@ const CurrentImagePreview = () => { pointerEvents: 'none', }} > - {/* */} + )} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 538af11d73..74fea27927 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -35,6 +35,8 @@ import { import { ImageDTO } from 'services/api/types'; import { AddImageToBoardContext } from '../../../../app/contexts/AddImageToBoardContext'; import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions'; +import { useDebounce } from 'use-debounce'; +import { skipToken } from '@reduxjs/toolkit/dist/query'; type SingleSelectionMenuItemsProps = { imageDTO: ImageDTO; @@ -70,7 +72,16 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { const { onClickAddToBoard } = useContext(AddImageToBoardContext); - const { currentData } = useGetImageMetadataQuery(imageDTO.image_name); + const [debouncedMetadataQueryArg, debounceState] = useDebounce( + imageDTO.image_name, + 500 + ); + + const { currentData } = useGetImageMetadataQuery( + debounceState.isPending() + ? skipToken + : debouncedMetadataQueryArg ?? skipToken + ); const { isClipboardAPIAvailable, copyImageToClipboard } = useCopyImageToClipboard();