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

View File

@ -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',
}}
>
{/* <NextPrevImageButtons /> */}
<NextPrevImageButtons />
</motion.div>
)}
</AnimatePresence>

View File

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