(incubator-answer) branch dev updated: fix: add 400 second tag search debounce

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/dev by this push:
     new 895c1c41 fix: add 400 second tag search debounce
895c1c41 is described below

commit 895c1c41df1c9141d8b601051bb960ae95491a0e
Author: Prithvijit Dasgupta <prith...@umich.edu>
AuthorDate: Sun Oct 13 23:46:10 2024 -0400

    fix: add 400 second tag search debounce
---
 ui/src/components/TagSelector/index.tsx | 34 ++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/TagSelector/index.tsx 
b/ui/src/components/TagSelector/index.tsx
index b3cb4480..3ce36819 100644
--- a/ui/src/components/TagSelector/index.tsx
+++ b/ui/src/components/TagSelector/index.tsx
@@ -18,10 +18,11 @@
  */
 
 /* eslint-disable no-nested-ternary */
-import { FC, useState, useEffect, useRef } from 'react';
+import { FC, useState, useEffect, useRef, useCallback } from 'react';
 import { Dropdown, Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import debounce from 'lodash/debounce';
 import { marked } from 'marked';
 import classNames from 'classnames';
 
@@ -69,7 +70,7 @@ const TagSelector: FC<IProps> = ({
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [repeatIndex, setRepeatIndex] = useState(-1);
   const [searchValue, setSearchValue] = useState<string>('');
-  const [tags, setTags] = useState<Type.Tag[] | null>(null);
+  const [tags, setTags] = useState<Type.Tag[] | null>([]);
   const [requiredTags, setRequiredTags] = useState<Type.Tag[] | null>(null);
   const { t } = useTranslation('translation', { keyPrefix: 'tag_selector' });
   const { data: userPermission } = useUserPermission('tag.add');
@@ -146,20 +147,23 @@ const TagSelector: FC<IProps> = ({
     handleMenuShow(false);
   };
 
-  const fetchTags = (str) => {
-    if (!showRequiredTag && !str) {
-      setTags([]);
-      return;
-    }
-    queryTags(str).then((res) => {
-      const tagArray: Type.Tag[] = filterTags(res || []);
-      if (str === '') {
-        setRequiredTags(res);
+  const fetchTags = useCallback(
+    debounce((str) => {
+      if (!showRequiredTag && !str) {
+        setTags([]);
+        return;
       }
-      handleMenuShow(tagArray.length > 0);
-      setTags(tagArray);
-    });
-  };
+      queryTags(str).then((res) => {
+        const tagArray: Type.Tag[] = filterTags(res || []);
+        if (str === '') {
+          setRequiredTags(res);
+        }
+        handleMenuShow(tagArray.length > 0);
+        setTags(tagArray);
+      });
+    }, 400),
+    [],
+  );
 
   const resetSearch = () => {
     setCurrentIndex(0);