#1215 | Debounce and fix autoload for SubjectSelect in DEA

avniproject · May 16, 2024 · 8058444 · 8058444
1 parent 2e4d915
commit 8058444
Showing 1 changed file with 28 additions and 25 deletions.
diff --git a/src/dataEntryApp/components/SubjectFormElement.js b/src/dataEntryApp/components/SubjectFormElement.js
@@ -4,7 +4,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import SubjectSearchService from "../services/SubjectSearchService";
 import { subjectService } from "../services/SubjectService";
-import { find, first, isEmpty, xor } from "lodash";
+import { debounce, find, first, isEmpty, xor } from "lodash";
 import { FormHelperText } from "@material-ui/core";
 import { Individual } from "avni-models";
 import { Concept } from "openchs-models";
@@ -56,34 +56,37 @@ const SubjectFormElement = props => {
     }
   };
 
-  const loadSubjects = async inputValue => {
-    const searchResults = await SubjectSearchService.search({
+  const loadSubjects = async (inputValue, callback) => {
+    SubjectSearchService.search({
       name: inputValue,
       subjectType: subjectTypeUuid
-    });
-
-    const filteredSubjects =
-      isMultiSelect && selectedSubjects
-        ? searchResults.listOfRecords.filter(
-            subject => selectedSubjects.map(selectedSubject => selectedSubject.value.uuid).indexOf(subject.uuid) === -1
+    })
+      .then(searchResults =>
+        searchResults.listOfRecords
+          .filter(subject =>
+            isMultiSelect && selectedSubjects
+              ? selectedSubjects.map(selectedSubject => selectedSubject.value.uuid).indexOf(subject.uuid) === -1
+              : true
           )
-        : searchResults.listOfRecords;
-
-    return filteredSubjects.map(subject => ({
-      label: constructSubjectLabel(subject, true),
-      value: {
-        id: subject.id,
-        uuid: subject.uuid,
-        firstName: subject.firstName,
-        middleName: subject.middleName,
-        lastName: subject.lastName,
-        fullName: subject.fullName,
-        profilePicture: subject.profilePicture,
-        addressLevel: subject.addressLevel
-      }
-    }));
+          .map(subject => ({
+            label: constructSubjectLabel(subject, true),
+            value: {
+              id: subject.id,
+              uuid: subject.uuid,
+              firstName: subject.firstName,
+              middleName: subject.middleName,
+              lastName: subject.lastName,
+              fullName: subject.fullName,
+              profilePicture: subject.profilePicture,
+              addressLevel: subject.addressLevel
+            }
+          }))
+      )
+      .then(callback);
   };
 
+  const debouncedLoadSubjects = debounce(loadSubjects, 500);
+
   const placeholder = "Type to search...";
   const noResults = "No results";
   return (
@@ -96,7 +99,7 @@ const SubjectFormElement = props => {
         <Grid item xs={10}>
           <AsyncSelect
             cacheOptions
-            loadOptions={loadSubjects}
+            loadOptions={debouncedLoadSubjects}
             name={fieldLabel}
             isMulti={isMultiSelect}
             isSearchable