diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index 4a5cfa3c7..db3a82a88 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -5,7 +5,7 @@ import { useListContext } from '/@/renderer/context/list-context';
import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
-import { SearchInput } from '/@/renderer/features/shared/components/search-input';
+import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
@@ -30,7 +30,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
-
+
diff --git a/src/renderer/features/shared/components/list-search-input.tsx b/src/renderer/features/shared/components/list-search-input.tsx
new file mode 100644
index 000000000..8d2645abc
--- /dev/null
+++ b/src/renderer/features/shared/components/list-search-input.tsx
@@ -0,0 +1,10 @@
+import { SearchInput } from '/@/renderer/features/shared/components/search-input';
+import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
+
+export const ListSearchInput = () => {
+ const { searchTerm, setSearchTerm } = useSearchTermFilter();
+
+ return (
+ setSearchTerm(e.target.value)} />
+ );
+};
diff --git a/src/renderer/features/shared/hooks/use-search-term-filter.ts b/src/renderer/features/shared/hooks/use-search-term-filter.ts
index 9392a180e..13416879c 100644
--- a/src/renderer/features/shared/hooks/use-search-term-filter.ts
+++ b/src/renderer/features/shared/hooks/use-search-term-filter.ts
@@ -1,4 +1,4 @@
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedCallback } from '@mantine/hooks';
import { parseAsString, useQueryState } from 'nuqs';
import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
@@ -9,11 +9,10 @@ export const useSearchTermFilter = (defaultValue?: string) => {
defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
);
- const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
+ const debouncedSetSearchTerm = useDebouncedCallback(setSearchTerm, 300);
return {
- [FILTER_KEYS.SHARED.SEARCH_TERM]: debouncedSearchTerm ?? undefined,
- rawSearchTerm: searchTerm ?? undefined,
- setSearchTerm,
+ [FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
+ setSearchTerm: debouncedSetSearchTerm,
};
};