Merge branch 'issue-552' into develop

Author: callmekatootie

client/src/components/SuggestionBox/index.jsx

@@ -3,8 +3,10 @@ import Autosuggest from "react-autosuggest";
 import config from "../../config";
 import api from "../../services/api";
 import style from "./style.module.scss";
+import _ from "lodash";
 
 const NO_RESULTS_FOUND = "no results found";
+const DELAY_SEARCH = 300;
 
 /**
  * Decides what is displayed after the user selects a suggestion
@@ -102,6 +104,7 @@ export default function SuggestionBox({
   const onSuggestionsFetchRequested = async ({ value }) => {
     if (purpose === "skills") {
       let data = await getSkillsSuggestions(apiClient, value);
+
       if (data.length < 1) data = [{ name: NO_RESULTS_FOUND }];
       setSuggestions(data);
     } else {
@@ -115,6 +118,11 @@ export default function SuggestionBox({
     }
   };
 
+  const onSuggestionsFetchRequestedDebounce = React.useCallback(
+    _.debounce(onSuggestionsFetchRequested, DELAY_SEARCH),
+    []
+  );
+
   const onSuggestionsClearRequested = () => setSuggestions([]);
 
   const onSuggestionSelected = (event, { suggestion }) => {
@@ -140,7 +148,7 @@ export default function SuggestionBox({
   return (
     <Autosuggest
       suggestions={suggestions}
-      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+      onSuggestionsFetchRequested={onSuggestionsFetchRequestedDebounce}
       onSuggestionsClearRequested={onSuggestionsClearRequested}
       onSuggestionSelected={onSuggestionSelected}
       getSuggestionValue={getSuggestionValue}