From 23809937248501dcf0b9038bc16ea42abd2bc56b Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Tue, 9 May 2023 19:22:09 +0800
Subject: [PATCH] reduce location search debounce time (#806)

---
 .../$libraryId/settings/library/locations/index.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/interface/app/$libraryId/settings/library/locations/index.tsx b/interface/app/$libraryId/settings/library/locations/index.tsx
index 0590d2062..a60a6988e 100644
--- a/interface/app/$libraryId/settings/library/locations/index.tsx
+++ b/interface/app/$libraryId/settings/library/locations/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useDebouncedCallback } from 'use-debounce';
+import { useDebounce } from 'use-debounce';
 import { useLibraryQuery } from '@sd/client';
 import { SearchInput } from '@sd/ui';
 import { Heading } from '../../Layout';
@@ -10,14 +10,14 @@ export const Component = () => {
 	const locations = useLibraryQuery(['locations.list']);
 
 	const [search, setSearch] = useState('');
-	const updateSearch = useDebouncedCallback(setSearch, 750);
+	const [debouncedSearch] = useDebounce(search, 200);
 
 	const filteredLocations = useMemo(
 		() =>
 			locations.data?.filter((location) =>
-				location.name.toLowerCase().includes(search.toLowerCase())
+				location.name.toLowerCase().includes(debouncedSearch.toLowerCase())
 			),
-		[search, locations.data]
+		[debouncedSearch, locations.data]
 	);
 
 	return (
@@ -30,7 +30,7 @@ export const Component = () => {
 						<SearchInput
 							placeholder="Search locations"
 							className="h-[33px]"
-							onChange={(e) => updateSearch(e.target.value)}
+							onChange={(e) => setSearch(e.target.value)}
 						/>
 						<AddLocationButton variant="accent" size="md" />
 					</div>