#1215 | Debounce inputs to Location select in DEA

src/common/components/AddressLevelsByType.js

@@ -31,11 +31,7 @@ const AddressLevelsByType = ({ label, addressLevelsIds = [], setAddressLevelsIds
     fetchLocation(value, callback);
   };
 
-  const debouncedLoadLocation = debounce(loadLocations, 250, {
-    leading: false,
-    trailing: true,
-    maxWait: 1000
-  });
+  const debouncedLoadLocation = debounce(loadLocations, 500);
 
   function fetchLocation(value, callback) {
     const inputValue = deburr(value.trim()).toLowerCase();

src/dataEntryApp/components/LocationSelect.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { deburr, get, isEmpty, map } from "lodash";
+import { debounce, deburr, get, isEmpty, map } from "lodash";
 import { locationNameRenderer } from "../utils/LocationUtil";
 import { addressLevelService } from "../services/AddressLevelService";
 import AsyncSelect from "react-select/async";
@@ -48,25 +48,25 @@ const LocationSelect = ({ onSelect, selectedLocation, placeholder, typeId, paren
 
   const loadLocations = (value, callback) => {
     if (!value) {
-      return callback([]);
+      callback([]);
     }
-    return fetchLocation(value, callback);
+    fetchLocation(value, callback);
   };
 
+  const debouncedLoadLocations = debounce(loadLocations, 500);
+
   const makeParameter = (key, value) => {
     return value ? `&${key}=${value}` : "";
   };
 
   function fetchLocation(value, callback) {
     const inputValue = deburr(value.trim()).toLowerCase();
     let title = encodeURIComponent(inputValue);
-    let apiUrl = `/locations/search/find?title=${title}${makeParameter(
-      "typeId",
-      typeId
-    )}${makeParameter("parentId", parentId)}&size=100&page=0`;
-    return httpClient
-      .get(apiUrl)
-      .then(response => callback(getLocationOptions(get(response, "data.content", []))));
+    let apiUrl = `/locations/search/find?title=${title}${makeParameter("typeId", typeId)}${makeParameter(
+      "parentId",
+      parentId
+    )}&size=100&page=0`;
+    httpClient.get(apiUrl).then(response => callback(getLocationOptions(get(response, "data.content", []))));
   }
 
   const getLocationOptions = locations =>
@@ -86,7 +86,7 @@ const LocationSelect = ({ onSelect, selectedLocation, placeholder, typeId, paren
         value={selectedLocationValue}
         placeholder={t(placeholder)}
         onChange={onLocationSelected}
-        loadOptions={loadLocations}
+        loadOptions={debouncedLoadLocations}
         formatOptionLabel={formatOptionLabel}
       />
     </div>