fix(ui): debounce metadata query on context menu

This commit is contained in:
psychedelicious 2023-07-21 15:37:33 +10:00
parent dd0b4dc744
commit fc98089960
2 changed files with 49 additions and 38 deletions
invokeai/frontend/web/src/features/gallery/components

View File

@ -54,44 +54,44 @@ const CurrentImagePreview = () => {
shouldAntialiasProgressImage, shouldAntialiasProgressImage,
} = useAppSelector(imagesSelector); } = useAppSelector(imagesSelector);
// const { const {
// handlePrevImage, handlePrevImage,
// handleNextImage, handleNextImage,
// prevImageId, prevImageId,
// nextImageId, nextImageId,
// isOnLastImage, isOnLastImage,
// handleLoadMoreImages, handleLoadMoreImages,
// areMoreImagesAvailable, areMoreImagesAvailable,
// isFetching, isFetching,
// } = useNextPrevImage(); } = useNextPrevImage();
// useHotkeys( useHotkeys(
// 'left', 'left',
// () => { () => {
// handlePrevImage(); handlePrevImage();
// }, },
// [prevImageId] [prevImageId]
// ); );
// useHotkeys( useHotkeys(
// 'right', 'right',
// () => { () => {
// if (isOnLastImage && areMoreImagesAvailable && !isFetching) { if (isOnLastImage && areMoreImagesAvailable && !isFetching) {
// handleLoadMoreImages(); handleLoadMoreImages();
// return; return;
// } }
// if (!isOnLastImage) { if (!isOnLastImage) {
// handleNextImage(); handleNextImage();
// } }
// }, },
// [ [
// nextImageId, nextImageId,
// isOnLastImage, isOnLastImage,
// areMoreImagesAvailable, areMoreImagesAvailable,
// handleLoadMoreImages, handleLoadMoreImages,
// isFetching, isFetching,
// ] ]
// ); );
const { const {
currentData: imageDTO, currentData: imageDTO,
@ -213,7 +213,7 @@ const CurrentImagePreview = () => {
pointerEvents: 'none', pointerEvents: 'none',
}} }}
> >
{/* <NextPrevImageButtons /> */} <NextPrevImageButtons />
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

View File

@ -35,6 +35,8 @@ import {
import { ImageDTO } from 'services/api/types'; import { ImageDTO } from 'services/api/types';
import { AddImageToBoardContext } from '../../../../app/contexts/AddImageToBoardContext'; import { AddImageToBoardContext } from '../../../../app/contexts/AddImageToBoardContext';
import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions'; import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions';
import { useDebounce } from 'use-debounce';
import { skipToken } from '@reduxjs/toolkit/dist/query';
type SingleSelectionMenuItemsProps = { type SingleSelectionMenuItemsProps = {
imageDTO: ImageDTO; imageDTO: ImageDTO;
@ -70,7 +72,16 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
const { onClickAddToBoard } = useContext(AddImageToBoardContext); 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 } = const { isClipboardAPIAvailable, copyImageToClipboard } =
useCopyImageToClipboard(); useCopyImageToClipboard();