debounce user search

Author: Sorosliu1029

jupyterlab_leetcode/handlers/leetcode_handler.py

@@ -23,6 +23,7 @@ class LeetCodeHandler(BaseHandler):
     """Base handler for LeetCode-related requests."""
 
     async def prepare(self) -> None:
+        """Prepare the handler by checking for LeetCode cookies."""
         await super().prepare()
         if not self.settings.get("leetcode_headers"):
             browser = self.get_cookie("leetcode_browser")

src/components/QuestionQueryBar.tsx

@@ -12,7 +12,6 @@ const QuestionQueryBar: React.FC<{
       placeholder="Search questions"
       mb="md"
       leftSection={<IconSearch size={16} stroke={1.5} />}
-      value={query.keyword}
       onChange={e => updateQuery({ ...query, keyword: e.target.value })}
     />
   );

src/components/QuestionTable.tsx

@@ -5,6 +5,7 @@ import { LeetCodeQuestion, LeetCodeQuestionQuery } from '../types/leetcode';
 import QuestionItem from './QuestionItem';
 import { Table, Text, Stack, ScrollArea, Skeleton } from '@mantine/core';
 import QuestionQueryBar from './QuestionQueryBar';
+import { useDebouncedState } from '@mantine/hooks';
 
 const QuestionTable: React.FC<{
   openNotebook: (p: string) => void;
@@ -19,7 +20,12 @@ const QuestionTable: React.FC<{
   const [_finishedLength, setFinishedLength] = useState(0);
   const [_totalLength, setTotalLength] = useState(0);
 
-  const [query, setQuery] = useState<LeetCodeQuestionQuery>({ keyword: '' });
+  const [query, setQuery] = useDebouncedState<LeetCodeQuestionQuery>(
+    {
+      keyword: ''
+    },
+    100
+  );
 
   const updateQuery = (newQuery: LeetCodeQuestionQuery) => {
     setQuery(newQuery);