tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2025-03-14 09:50:12 +00:00
Code Issues Projects Releases Wiki Activity

debounce search

Browse Source
This commit is contained in:
Simon 2025-01-30 20:26:20 +07:00
parent d643e8c573
commit 937ff5c92c
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/pages/Search.tsx
View File

@ -47,6 +47,7 @@ const Search = () => {
const gridItems = userMeConfig.grid_items || 3; const gridItems = userMeConfig.grid_items || 3;
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState<string>('');
const [searchResults, setSearchResults] = useState<SearchResultsType>(); const [searchResults, setSearchResults] = useState<SearchResultsType>();
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
@ -75,19 +76,28 @@ const Search = () => {
const gridViewGrid = isGridView ? `grid-${gridItems}` : ''; const gridViewGrid = isGridView ? `grid-${gridItems}` : '';
useEffect(() => { useEffect(() => {
(async () => { const handler = setTimeout(() => {
if (!hasSearchQuery) { setDebouncedSearchTerm(searchQuery);
}, 500);
return () => {
clearTimeout(handler);
};
}, [searchQuery]);
useEffect(() => {
if (debouncedSearchTerm.trim() !== '') {
fetchResults();
} else {
setSearchResults(EmptySearchResponse); setSearchResults(EmptySearchResponse);
return;
} }
}, [debouncedSearchTerm, refresh]);
const searchResults = await loadSearch(searchQuery); const fetchResults = async () => {
const searchResults = await loadSearch(debouncedSearchTerm);
setSearchResults(searchResults); setSearchResults(searchResults);
setRefresh(false); setRefresh(false);
})(); };
}, [searchQuery, refresh, hasSearchQuery]);
return ( return (
<> <>