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

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

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