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();