diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index 68e9f68a2bc5..7ce3854d4e3c 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -1,7 +1,7 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
-import React, {useCallback, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {InteractionManager, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import Button from '@components/Button';
@@ -10,12 +10,14 @@ import {usePersonalDetails} from '@components/OnyxProvider';
import {PressableWithFeedback} from '@components/Pressable';
import SelectCircle from '@components/SelectCircle';
import SelectionList from '@components/SelectionList';
+import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Report from '@libs/actions/Report';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
import MoneyRequestReferralProgramCTA from '@pages/iou/MoneyRequestReferralProgramCTA';
import reportPropTypes from '@pages/reportPropTypes';
import CONST from '@src/CONST';
@@ -79,7 +81,8 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
}) {
const {translate} = useLocalize();
const styles = useThemeStyles();
- const [searchTerm, setSearchTerm] = useState('');
+ const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+ const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
const {isOffline} = useNetwork();
const personalDetails = usePersonalDetails();
@@ -87,6 +90,16 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+ const isOptionsDataReady = useMemo(() => ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails), [personalDetails]);
+
+ useEffect(() => {
+ const interactionTask = InteractionManager.runAfterInteractions(() => {
+ setDidScreenTransitionEnd(true);
+ });
+
+ return interactionTask.cancel;
+ }, []);
+
/**
* Returns the sections needed for the OptionsSelector
*
@@ -238,13 +251,12 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
[maxParticipantsReached, newChatOptions.personalDetails.length, newChatOptions.recentReports.length, newChatOptions.userToInvite, participants, searchTerm],
);
- // When search term updates we will fetch any reports
- const setSearchTermAndSearchInServer = useCallback((text = '') => {
- if (text.length) {
- Report.searchInServer(text);
+ useEffect(() => {
+ if (!debouncedSearchTerm.length) {
+ return;
}
- setSearchTerm(text);
- }, []);
+ Report.searchInServer(debouncedSearchTerm);
+ }, [debouncedSearchTerm]);
// Right now you can't split a request with a workspace and other additional participants
// This is getting properly fixed in https://github.com/Expensify/App/issues/27508, but as a stop-gap to prevent
@@ -326,16 +338,16 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
0 ? safeAreaPaddingBottomStyle : {}]}>
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 9edede770233..49a28dff1a7f 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -1,7 +1,7 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
-import React, {useCallback, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {InteractionManager, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import Button from '@components/Button';
@@ -10,12 +10,14 @@ import {usePersonalDetails} from '@components/OnyxProvider';
import {PressableWithFeedback} from '@components/Pressable';
import SelectCircle from '@components/SelectCircle';
import SelectionList from '@components/SelectionList';
+import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Report from '@libs/actions/Report';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
import MoneyRequestReferralProgramCTA from '@pages/iou/MoneyRequestReferralProgramCTA';
import reportPropTypes from '@pages/reportPropTypes';
import CONST from '@src/CONST';
@@ -84,12 +86,30 @@ function MoneyRequestParticipantsSelector({
}) {
const {translate} = useLocalize();
const styles = useThemeStyles();
- const [searchTerm, setSearchTerm] = useState('');
+ const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+ const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
const {isOffline} = useNetwork();
const personalDetails = usePersonalDetails();
const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
+ const isOptionsDataReady = useMemo(() => ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails), [personalDetails]);
+
+ useEffect(() => {
+ const interactionTask = InteractionManager.runAfterInteractions(() => {
+ setDidScreenTransitionEnd(true);
+ });
+
+ return interactionTask.cancel;
+ }, []);
+
+ useEffect(() => {
+ if (!debouncedSearchTerm.length) {
+ return;
+ }
+ Report.searchInServer(debouncedSearchTerm);
+ }, [debouncedSearchTerm]);
+
const newChatOptions = useMemo(() => {
const chatOptions = OptionsListUtils.getFilteredOptions(
reports,
@@ -258,12 +278,6 @@ function MoneyRequestParticipantsSelector({
[maxParticipantsReached, newChatOptions.personalDetails.length, newChatOptions.recentReports.length, newChatOptions.userToInvite, participants, searchTerm],
);
- // When search term updates we will fetch any reports
- const setSearchTermAndSearchInServer = useCallback((text = '') => {
- Report.searchInServer(text);
- setSearchTerm(text);
- }, []);
-
// Right now you can't split a request with a workspace and other additional participants
// This is getting properly fixed in https://github.com/Expensify/App/issues/27508, but as a stop-gap to prevent
// the app from crashing on native when you try to do this, we'll going to show error message if you have a workspace and other participants
@@ -345,16 +359,16 @@ function MoneyRequestParticipantsSelector({
0 ? safeAreaPaddingBottomStyle : {}]}>