Use 'isSearchingForReports' to control green circular loading

src/pages/ChatFinderPage/index.tsx

@@ -185,7 +185,7 @@ function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPa
                 onSelectRow={selectReport}
                 showLoadingPlaceholder={!areOptionsInitialized || !isScreenTransitionEnd}
                 footerContent={!isDismissed && ChatFinderPageFooterInstance}
-                isLoadingNewOptions={isSearchingForReports ?? undefined}
+                isLoadingNewOptions={!!isSearchingForReports}
             />
         </ScreenWrapper>
     );

src/pages/RoomInvitePage.tsx

@@ -3,6 +3,8 @@ import Str from 'expensify-common/lib/str';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import type {SectionListData} from 'react-native';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -13,8 +15,10 @@ import type {Section} from '@components/SelectionList/types';
 import UserListItem from '@components/SelectionList/UserListItem';
 import withNavigationTransitionEnd from '@components/withNavigationTransitionEnd';
 import type {WithNavigationTransitionEndProps} from '@components/withNavigationTransitionEnd';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ReportActions from '@libs/actions/Report';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -26,6 +30,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import type {RoomInviteNavigatorParamList} from '@navigation/types';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Policy} from '@src/types/onyx';
@@ -34,28 +39,37 @@ import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound
 import withReportOrNotFound from './home/report/withReportOrNotFound';
 import SearchInputManager from './workspace/SearchInputManager';
 
-type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps & StackScreenProps<RoomInviteNavigatorParamList, typeof SCREENS.ROOM_INVITE_ROOT>;
+type RoomInvitePageOnyxProps = {
+    /** Whether or not we are searching for reports on the server */
+    isSearchingForReports: OnyxEntry<boolean>;
+};
+type RoomInvitePageProps = WithReportOrNotFoundProps &
+    WithNavigationTransitionEndProps &
+    RoomInvitePageOnyxProps &
+    StackScreenProps<RoomInviteNavigatorParamList, typeof SCREENS.ROOM_INVITE_ROOT>;
 
 type Sections = Array<SectionListData<OptionsListUtils.MemberForList, Section<OptionsListUtils.MemberForList>>>;
 
 function RoomInvitePage({
     betas,
     report,
     policies,
+    isSearchingForReports,
     route: {
         params: {role},
     },
 }: RoomInvitePageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [searchTerm, setSearchTerm] = useState('');
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const [selectedOptions, setSelectedOptions] = useState<ReportUtils.OptionData[]>([]);
     const [invitePersonalDetails, setInvitePersonalDetails] = useState<ReportUtils.OptionData[]>([]);
     const [userToInvite, setUserToInvite] = useState<ReportUtils.OptionData | null>(null);
     const {options, areOptionsInitialized} = useOptionsList();
 
     useEffect(() => {
         setSearchTerm(SearchInputManager.searchInput);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     // Any existing participants and Expensify emails should not be eligible for invitation
@@ -68,7 +82,7 @@ function RoomInvitePage({
     );
 
     useEffect(() => {
-        const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], searchTerm, excludedUsers);
+        const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers);
 
         // Update selectedOptions with the latest personalDetails information
         const detailsMap: Record<string, OptionsListUtils.MemberForList> = {};
@@ -87,7 +101,7 @@ function RoomInvitePage({
         setInvitePersonalDetails(inviteOptions.personalDetails);
         setSelectedOptions(newSelectedOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change
-    }, [betas, searchTerm, excludedUsers, options.personalDetails]);
+    }, [betas, debouncedSearchTerm, excludedUsers, options.personalDetails]);
 
     const sections = useMemo(() => {
         const sectionsArr: Sections = [];
@@ -98,12 +112,12 @@ function RoomInvitePage({
 
         // Filter all options that is a part of the search term or in the personal details
         let filterSelectedOptions = selectedOptions;
-        if (searchTerm !== '') {
+        if (debouncedSearchTerm !== '') {
             filterSelectedOptions = selectedOptions.filter((option) => {
                 const accountID = option?.accountID;
                 const isOptionInPersonalDetails = invitePersonalDetails.some((personalDetail) => accountID && personalDetail?.accountID === accountID);
-                const parsedPhoneNumber = PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(Str.removeSMSDomain(searchTerm)));
-                const searchValue = parsedPhoneNumber.possible && parsedPhoneNumber.number ? parsedPhoneNumber.number.e164 : searchTerm.toLowerCase();
+                const parsedPhoneNumber = PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(Str.removeSMSDomain(debouncedSearchTerm)));
+                const searchValue = parsedPhoneNumber.possible && parsedPhoneNumber.number ? parsedPhoneNumber.number.e164 : debouncedSearchTerm.toLowerCase();
                 const isPartOfSearchTerm = (option.text?.toLowerCase() ?? '').includes(searchValue) || (option.login?.toLowerCase() ?? '').includes(searchValue);
                 return isPartOfSearchTerm || isOptionInPersonalDetails;
             });
@@ -134,7 +148,7 @@ function RoomInvitePage({
         }
 
         return sectionsArr;
-    }, [areOptionsInitialized, selectedOptions, searchTerm, invitePersonalDetails, userToInvite, translate]);
+    }, [areOptionsInitialized, selectedOptions, debouncedSearchTerm, invitePersonalDetails, userToInvite, translate]);
 
     const toggleOption = useCallback(
         (option: OptionsListUtils.MemberForList) => {
@@ -193,7 +207,7 @@ function RoomInvitePage({
     }, [role, reportID, backRoute]);
 
     const headerMessage = useMemo(() => {
-        const searchValue = searchTerm.trim().toLowerCase();
+        const searchValue = debouncedSearchTerm.trim().toLowerCase();
         const expensifyEmails = CONST.EXPENSIFY_EMAILS as string[];
         if (!userToInvite && expensifyEmails.includes(searchValue)) {
             return translate('messages.errorMessageInvalidEmail');
@@ -209,7 +223,11 @@ function RoomInvitePage({
             return translate('messages.userIsAlreadyMember', {login: searchValue, name: reportName});
         }
         return OptionsListUtils.getHeaderMessage(invitePersonalDetails.length !== 0, Boolean(userToInvite), searchValue);
-    }, [searchTerm, userToInvite, excludedUsers, invitePersonalDetails, translate, reportName]);
+    }, [debouncedSearchTerm, userToInvite, excludedUsers, invitePersonalDetails, translate, reportName]);
+
+    useEffect(() => {
+        ReportActions.searchInServer(debouncedSearchTerm);
+    }, [debouncedSearchTerm]);
 
     return (
         <ScreenWrapper
@@ -243,6 +261,7 @@ function RoomInvitePage({
                     showScrollIndicator
                     shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
                     showLoadingPlaceholder={!areOptionsInitialized}
+                    isLoadingNewOptions={!!isSearchingForReports}
                 />
                 <View style={[styles.flexShrink0]}>
                     <FormAlertWithSubmitButton
@@ -262,4 +281,13 @@ function RoomInvitePage({
 
 RoomInvitePage.displayName = 'RoomInvitePage';
 
-export default withNavigationTransitionEnd(withReportOrNotFound()(RoomInvitePage));
+export default withNavigationTransitionEnd(
+    withReportOrNotFound()(
+        withOnyx<RoomInvitePageProps, RoomInvitePageOnyxProps>({
+            isSearchingForReports: {
+                key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+                initWithStoredValues: false,
+            },
+        })(RoomInvitePage),
+    ),
+);

src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

@@ -8,7 +8,7 @@ import lodashSome from 'lodash/some';
 import lodashValues from 'lodash/values';
 import PropTypes from 'prop-types';
 import React, {memo, useCallback, useEffect, useMemo} from 'react';
-import {useOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -62,14 +62,18 @@ const propTypes = {
 
     /** The action of the IOU, i.e. create, split, move */
     action: PropTypes.oneOf(lodashValues(CONST.IOU.ACTION)),
+
+    /** Whether or not we are searching for reports on the server */
+    isSearchingForReports: PropTypes.bool,
 };
 
 const defaultProps = {
     participants: [],
     action: CONST.IOU.ACTION.CREATE,
+    isSearchingForReports: false,
 };
 
-function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onFinish, onParticipantsAdded, iouType, iouRequestType, action}) {
+function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onFinish, onParticipantsAdded, iouType, iouRequestType, action, isSearchingForReports}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
@@ -375,6 +379,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF
             headerMessage={headerMessage}
             showLoadingPlaceholder={!areOptionsInitialized || !didScreenTransitionEnd}
             canSelectMultiple={isIOUSplit && isAllowedToSplit}
+            isLoadingNewOptions={!!isSearchingForReports}
         />
     );
 }
@@ -383,11 +388,19 @@ MoneyTemporaryForRefactorRequestParticipantsSelector.propTypes = propTypes;
 MoneyTemporaryForRefactorRequestParticipantsSelector.defaultProps = defaultProps;
 MoneyTemporaryForRefactorRequestParticipantsSelector.displayName = 'MoneyTemporaryForRefactorRequestParticipantsSelector';
 
-export default memo(
-    MoneyTemporaryForRefactorRequestParticipantsSelector,
-    (prevProps, nextProps) =>
-        lodashIsEqual(prevProps.participants, nextProps.participants) &&
-        prevProps.iouRequestType === nextProps.iouRequestType &&
-        prevProps.iouType === nextProps.iouType &&
-        lodashIsEqual(prevProps.betas, nextProps.betas),
+export default withOnyx({
+    isSearchingForReports: {
+        key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+        initWithStoredValues: false,
+    },
+})(
+    memo(
+        MoneyTemporaryForRefactorRequestParticipantsSelector,
+        (prevProps, nextProps) =>
+            lodashIsEqual(prevProps.participants, nextProps.participants) &&
+            prevProps.iouRequestType === nextProps.iouRequestType &&
+            prevProps.iouType === nextProps.iouType &&
+            lodashIsEqual(prevProps.betas, nextProps.betas) &&
+            prevProps.isSearchingForReports === nextProps.isSearchingForReports,
+    ),
 );

src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx

@@ -1,4 +1,6 @@
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {useBetas} from '@components/OnyxProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
@@ -8,15 +10,23 @@ import UserListItem from '@components/SelectionList/UserListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import * as ReportActions from '@libs/actions/Report';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
-import type {BaseShareLogListProps} from './types';
+import type {BaseShareLogListProps as BaseShareLogListTypeProps} from './types';
 
-function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) {
+type BaseShareLogListOnyxProps = {
+    /** Whether or not we are searching for reports on the server */
+    isSearchingForReports: OnyxEntry<boolean>;
+};
+
+type BaseShareLogListProps = BaseShareLogListTypeProps & BaseShareLogListOnyxProps;
+function BaseShareLogList({onAttachLogToReport, isSearchingForReports}: BaseShareLogListProps) {
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
@@ -82,6 +92,10 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) {
         onAttachLogToReport(option.reportID, filename);
     };
 
+    useEffect(() => {
+        ReportActions.searchInServer(debouncedSearchValue);
+    }, [debouncedSearchValue]);
+
     return (
         <ScreenWrapper
             testID={BaseShareLogList.displayName}
@@ -103,6 +117,7 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) {
                         textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                         textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                         showLoadingPlaceholder={!didScreenTransitionEnd}
+                        isLoadingNewOptions={!!isSearchingForReports}
                     />
                 </>
             )}
@@ -112,4 +127,9 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) {
 
 BaseShareLogList.displayName = 'ShareLogPage';
 
-export default BaseShareLogList;
+export default withOnyx<BaseShareLogListProps, BaseShareLogListOnyxProps>({
+    isSearchingForReports: {
+        key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+        initWithStoredValues: false,
+    },
+})(BaseShareLogList);

src/pages/tasks/TaskAssigneeSelectorModal.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable es/no-optional-chaining */
 import type {RouteProp} from '@react-navigation/native';
 import {useRoute} from '@react-navigation/native';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
@@ -21,6 +21,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ReportActions from '@libs/actions/Report';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -38,6 +39,9 @@ type TaskAssigneeSelectorModalOnyxProps = {
 
     /** Grab the Share destination of the Task */
     task: OnyxEntry<Task>;
+
+    /** Whether or not we are searching for reports on the server */
+    isSearchingForReports: OnyxEntry<boolean>;
 };
 
 type TaskAssigneeSelectorModalProps = TaskAssigneeSelectorModalOnyxProps & WithCurrentUserPersonalDetailsProps & WithNavigationTransitionEndProps;
@@ -89,17 +93,13 @@ function useOptions() {
     return {...options, searchValue, debouncedSearchValue, setSearchValue, areOptionsInitialized};
 }
 
-function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalProps) {
+function TaskAssigneeSelectorModal({reports, task, isSearchingForReports}: TaskAssigneeSelectorModalProps) {
     const styles = useThemeStyles();
     const route = useRoute<RouteProp<TaskDetailsNavigatorParamList, typeof SCREENS.TASK.ASSIGNEE>>();
     const {translate} = useLocalize();
     const session = useSession();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
-    const {userToInvite, recentReports, personalDetails, currentUserOption, searchValue, setSearchValue, headerMessage, areOptionsInitialized} = useOptions();
-
-    const onChangeText = (newSearchTerm = '') => {
-        setSearchValue(newSearchTerm);
-    };
+    const {userToInvite, recentReports, personalDetails, currentUserOption, searchValue, debouncedSearchValue, setSearchValue, headerMessage, areOptionsInitialized} = useOptions();
 
     const report: OnyxEntry<Report> = useMemo(() => {
         if (!route.params?.reportID) {
@@ -200,6 +200,10 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro
     const canModifyTask = TaskActions.canModifyTask(report, currentUserPersonalDetails.accountID);
     const isTaskNonEditable = ReportUtils.isTaskReport(report) && (!canModifyTask || !isOpen);
 
+    useEffect(() => {
+        ReportActions.searchInServer(debouncedSearchValue);
+    }, [debouncedSearchValue]);
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -215,11 +219,12 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro
                         sections={areOptionsInitialized ? sections : []}
                         ListItem={UserListItem}
                         onSelectRow={selectReport}
-                        onChangeText={onChangeText}
+                        onChangeText={setSearchValue}
                         textInputValue={searchValue}
                         headerMessage={headerMessage}
                         textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                         showLoadingPlaceholder={!areOptionsInitialized}
+                        isLoadingNewOptions={!!isSearchingForReports}
                     />
                 </View>
             </FullPageNotFoundView>
@@ -230,6 +235,10 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro
 TaskAssigneeSelectorModal.displayName = 'TaskAssigneeSelectorModal';
 
 const TaskAssigneeSelectorModalWithOnyx = withOnyx<TaskAssigneeSelectorModalProps, TaskAssigneeSelectorModalOnyxProps>({
+    isSearchingForReports: {
+        key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+        initWithStoredValues: false,
+    },
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },

src/pages/tasks/TaskShareDestinationSelectorModal.tsx

@@ -116,7 +116,7 @@ function TaskShareDestinationSelectorModal({isSearchingForReports}: TaskShareDes
                         headerMessage={options.headerMessage}
                         textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                         showLoadingPlaceholder={areOptionsInitialized && debouncedSearchValue.trim() === '' ? options.sections.length === 0 : !didScreenTransitionEnd}
-                        isLoadingNewOptions={isSearchingForReports ?? undefined}
+                        isLoadingNewOptions={!!isSearchingForReports}
                         textInputHint={textInputHint}
                     />
                 </View>