change(ui): debounce the highlights search

frontend/app/components/Highlights/HighlightsList.tsx

@@ -42,13 +42,18 @@ function HighlightsList() {
     retry: 3
   });
   const { total, notes } = data;
+  const debounceTimeout = React.useRef(0);
 
   const onSearch = (value: string) => {
     notesStore.setQuery(value);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    notesStore.setQuery(e.target.value);
+    const value = e.target.value;
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+    debounceTimeout.current = window.setTimeout(() => {
+      notesStore.setQuery(value);
+    }, 500);
   };
 
   const toggleTag = (tag?: iTag) => {

frontend/app/components/Highlights/HighlightsListHeader.tsx

@@ -79,7 +79,7 @@ function HighlightsListHeader({
       </div>
       <div className="w-56">
         <Input.Search
-          value={query}
+          defaultValue={query}
           allowClear
           name="spot-search"
           placeholder="Filter by title"
@@ -93,4 +93,4 @@ function HighlightsListHeader({
   )
 }
 
-export default HighlightsListHeader
+export default HighlightsListHeader