Merge pull request #22095 from Thanos30/fix/massive-lag-on-task-assig…

…nee-selection
Expensify · Jul 6, 2023 · 0e21bc5 · 0e21bc5
2 parents 40c494f + 158bdd9
commit 0e21bc5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -1,6 +1,7 @@
 /* eslint-disable es/no-optional-chaining */
-import React, {useState, useEffect, useMemo} from 'react';
+import React, {useState, useEffect, useMemo, useCallback} from 'react';
 import {View} from 'react-native';
+import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import OptionsSelector from '../../components/OptionsSelector';
@@ -75,16 +76,7 @@ function TaskAssigneeSelectorModal(props) {
     const [filteredUserToInvite, setFilteredUserToInvite] = useState(null);
     const [filteredCurrentUserOption, setFilteredCurrentUserOption] = useState(null);
 
-    useEffect(() => {
-        const results = OptionsListUtils.getNewChatOptions(props.reports, props.personalDetails, props.betas, '', [], CONST.EXPENSIFY_EMAILS, false);
-
-        setFilteredRecentReports(results.recentReports);
-        setFilteredPersonalDetails(results.personalDetails);
-        setFilteredUserToInvite(results.userToInvite);
-        setFilteredCurrentUserOption(results.currentUserOption);
-    }, [props]);
-
-    useEffect(() => {
+    const updateOptions = useCallback(() => {
         const {recentReports, personalDetails, userToInvite, currentUserOption} = OptionsListUtils.getNewChatOptions(
             props.reports,
             props.personalDetails,
@@ -103,6 +95,14 @@ function TaskAssigneeSelectorModal(props) {
         setFilteredCurrentUserOption(currentUserOption);
     }, [props, searchValue]);
 
+    useEffect(() => {
+        const debouncedSearch = _.debounce(updateOptions, 200);
+        debouncedSearch();
+        return () => {
+            debouncedSearch.cancel();
+        };
+    }, [updateOptions]);
+
     const onChangeText = (newSearchTerm = '') => {
         setSearchValue(newSearchTerm);
     };

diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -1,5 +1,5 @@
 /* eslint-disable es/no-optional-chaining */
-import React, {useState, useEffect, useMemo} from 'react';
+import React, {useState, useEffect, useMemo, useCallback} from 'react';
 import _ from 'underscore';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -48,7 +48,6 @@ function TaskShareDestinationSelectorModal(props) {
     const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]);
     const [filteredUserToInvite, setFilteredUserToInvite] = useState(null);
 
-    // Filter out all the reports where user is not allowed to create task
     const filteredReports = useMemo(() => {
         const reports = {};
         _.keys(props.reports).forEach((reportKey) => {
@@ -59,16 +58,7 @@ function TaskShareDestinationSelectorModal(props) {
         });
         return reports;
     }, [props.reports]);
-
-    useEffect(() => {
-        const results = OptionsListUtils.getShareDestinationOptions(filteredReports, props.personalDetails, props.betas, '', [], CONST.EXPENSIFY_EMAILS, true);
-
-        setFilteredUserToInvite(results.userToInvite);
-        setFilteredRecentReports(results.recentReports);
-        setFilteredPersonalDetails(results.personalDetails);
-    }, [props, filteredReports]);
-
-    useEffect(() => {
+    const updateOptions = useCallback(() => {
         const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getShareDestinationOptions(
             filteredReports,
             props.personalDetails,
@@ -86,6 +76,14 @@ function TaskShareDestinationSelectorModal(props) {
         setFilteredPersonalDetails(personalDetails);
     }, [props, searchValue, filteredReports]);
 
+    useEffect(() => {
+        const debouncedSearch = _.debounce(updateOptions, 150);
+        debouncedSearch();
+        return () => {
+            debouncedSearch.cancel();
+        };
+    }, [updateOptions]);
+
     const onChangeText = (newSearchTerm = '') => {
         setSearchValue(newSearchTerm);
     };