From 64849f0f5687bbf63c1985fe142b1018753a8c3a Mon Sep 17 00:00:00 2001 From: Thanos30 Date: Mon, 3 Jul 2023 03:23:39 +0300 Subject: [PATCH 1/4] Fix massive lag on Task Assignee Selection Modal --- src/pages/tasks/TaskAssigneeSelectorModal.js | 23 ++++++++++---------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index c9e80e0343dc..acda4180a95c 100644 --- 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,15 @@ function TaskAssigneeSelectorModal(props) { setFilteredCurrentUserOption(currentUserOption); }, [props, searchValue]); + + useEffect(() => { + const debouncedSearch = _.debounce(updateOptions, 200); + debouncedSearch(); + return () => { + debouncedSearch.cancel(); + } + }, [updateOptions]); + const onChangeText = (newSearchTerm = '') => { setSearchValue(newSearchTerm); }; From 769319216f5db2e10a8283e94af79ef3f6492c02 Mon Sep 17 00:00:00 2001 From: Thanos30 Date: Mon, 3 Jul 2023 21:39:02 +0300 Subject: [PATCH 2/4] Prettify code --- src/pages/tasks/TaskAssigneeSelectorModal.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index acda4180a95c..dd34c2376dc0 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.js +++ b/src/pages/tasks/TaskAssigneeSelectorModal.js @@ -95,13 +95,12 @@ function TaskAssigneeSelectorModal(props) { setFilteredCurrentUserOption(currentUserOption); }, [props, searchValue]); - useEffect(() => { const debouncedSearch = _.debounce(updateOptions, 200); debouncedSearch(); return () => { debouncedSearch.cancel(); - } + }; }, [updateOptions]); const onChangeText = (newSearchTerm = '') => { From bfb3db964fc6a7d2cd4be71f38f9ee41e751d039 Mon Sep 17 00:00:00 2001 From: Thanos30 Date: Tue, 4 Jul 2023 03:12:49 +0300 Subject: [PATCH 3/4] Apply the same logic to Share Destination --- .../TaskShareDestinationSelectorModal.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js index 329f4a410ccf..c9f7b5833bf9 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.js +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js @@ -1,5 +1,6 @@ /* eslint-disable es/no-optional-chaining */ -import React, {useState, useEffect} from 'react'; +import React, {useState, useEffect, useCallback} from 'react'; +import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -46,15 +47,7 @@ function TaskShareDestinationSelectorModal(props) { const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]); const [filteredUserToInvite, setFilteredUserToInvite] = useState(null); - useEffect(() => { - const results = OptionsListUtils.getShareDestinationOptions(props.reports, props.personalDetails, props.betas, '', [], CONST.EXPENSIFY_EMAILS, true); - - setFilteredUserToInvite(results.userToInvite); - setFilteredRecentReports(results.recentReports); - setFilteredPersonalDetails(results.personalDetails); - }, [props]); - - useEffect(() => { + const updateOptions = useCallback(() => { const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getShareDestinationOptions( props.reports, props.personalDetails, @@ -72,6 +65,15 @@ function TaskShareDestinationSelectorModal(props) { setFilteredPersonalDetails(personalDetails); }, [props, searchValue]); + useEffect(() => { + const debouncedSearch = _.debounce(updateOptions, 150); + debouncedSearch(); + return () => { + debouncedSearch.cancel(); + } + + }, [updateOptions]); + const onChangeText = (newSearchTerm = '') => { setSearchValue(newSearchTerm); }; From e01a4b205aeb0cb2a6c97f543422ebd9cdccae3f Mon Sep 17 00:00:00 2001 From: Thanos30 Date: Tue, 4 Jul 2023 03:15:01 +0300 Subject: [PATCH 4/4] Run npm run prettier --- src/pages/tasks/TaskShareDestinationSelectorModal.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js index c9f7b5833bf9..4154b711ac82 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.js +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js @@ -70,8 +70,7 @@ function TaskShareDestinationSelectorModal(props) { debouncedSearch(); return () => { debouncedSearch.cancel(); - } - + }; }, [updateOptions]); const onChangeText = (newSearchTerm = '') => {