Merge pull request #1373 from AletheiaFact/deboucing-in-wikidata-topics

Adding a debouncing mechanism when searching wikidata topics
AletheiaFact · Oct 17, 2024 · c1618c4 · c1618c4
2 parents 07b4b1a + 0306db2
commit c1618c4
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/src/components/topics/TopicDisplay.tsx b/src/components/topics/TopicDisplay.tsx
@@ -22,14 +22,15 @@ const TopicDisplay = ({
     const [tags, setTags] = useState<any[]>([]);
     const { t } = useTranslation();
     const dispatch = useDispatch();
+    let timeout: NodeJS.Timeout;
 
     useEffect(() => {
         const inputValueFormatted = inputValue.map((inputValue) =>
             inputValue?.value
                 ? {
-                      label: inputValue?.label.toLowerCase().replace(" ", "-"),
-                      value: inputValue?.value,
-                  }
+                    label: inputValue?.label.toLowerCase().replace(" ", "-"),
+                    value: inputValue?.value,
+                }
                 : inputValue
         );
 
@@ -44,22 +45,25 @@ const TopicDisplay = ({
         setTags(topicsArray?.concat(filterValues) || []);
     }, [inputValue, topicsArray]);
 
-    const fetchTopicList = async (
+    const fetchTopicList = (
         topic: string
-    ): Promise<{ label: string; value: string }[]> => {
-        const topicSearchResults = await TopicsApi.getTopics({
-            topicName: topic,
-            t: t,
-            dispatch: dispatch,
-        });
+    ) => new Promise<{ label: string; value: string }[]>((resolve) => {
+        if (timeout) clearTimeout(timeout);
 
-        return (
-            topicSearchResults?.map((topic) => ({
-                label: topic.name,
-                value: topic.wikidata,
-            })) || []
-        );
-    };
+        timeout = setTimeout(async () => {
+            const topicSearchResults = await TopicsApi.getTopics({
+                topicName: topic,
+                t,
+                dispatch,
+            });
+            resolve(
+                topicSearchResults?.map(({ name, wikidata }) => ({
+                    label: name,
+                    value: wikidata
+                })) || []
+            );
+        }, 1000);
+    });
 
     const handleClose = async (removedTopicValue: any) => {
         const newTopicsArray = topicsArray.filter(