From e325eee47ee005272c49cf437c163988ea85173f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 7 Feb 2025 14:00:39 +0100
Subject: [PATCH] change(ui): debounce the highlights search

---
 frontend/app/components/Highlights/HighlightsList.tsx      | 7 ++++++-
 .../app/components/Highlights/HighlightsListHeader.tsx     | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Highlights/HighlightsList.tsx b/frontend/app/components/Highlights/HighlightsList.tsx
index ffb328d10..da4aee141 100644
--- a/frontend/app/components/Highlights/HighlightsList.tsx
+++ b/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) => {
diff --git a/frontend/app/components/Highlights/HighlightsListHeader.tsx b/frontend/app/components/Highlights/HighlightsListHeader.tsx
index e67ad530e..f909868f3 100644
--- a/frontend/app/components/Highlights/HighlightsListHeader.tsx
+++ b/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
\ No newline at end of file
+export default HighlightsListHeader