diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx index 91c9f4f08..3dedf969a 100644 --- a/src/renderer/features/now-playing/components/play-queue.tsx +++ b/src/renderer/features/now-playing/components/play-queue.tsx @@ -1,3 +1,4 @@ +import { useDebouncedValue } from '@mantine/hooks'; import { nanoid } from 'nanoid/non-secure'; import { forwardRef, useEffect, useMemo, useRef } from 'react'; @@ -29,13 +30,15 @@ export const PlayQueue = forwardRef(({ listKey, sear const queue = usePlayerQueue(); const isFetching = useIsPlayerFetching(); + const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 200); + const data: QueueSong[] = useMemo(() => { - if (searchTerm) { - return searchSongs(queue, searchTerm); + if (debouncedSearchTerm) { + return searchSongs(queue, debouncedSearchTerm); } return queue; - }, [queue, searchTerm]); + }, [queue, debouncedSearchTerm]); const playQueueKeyRef = useRef({ alreadyRendered: false,