[HOLD component refactoring] [$500] [LOW] Green circular loading does not appear when searching for a contact in request money flow

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.43-14
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @brunovjk
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1708081508978019

Action Performed:

1. Click + and select Request money
2. Enter amount and click next
3. Search for any contact in the field

Expected Result:

Green circular loading ring is seen like when we search for a contact to chat

Actual Result:

Not appearing when searching in Request money flow

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.2773.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01788bcdaa345e5022
• Upwork Job ID: 1761057209378701312
• Last Price Increase: 2024-02-23

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01788bcdaa345e5022

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Green circular loading does not appear when searching for a contact in request money flow

What is the root cause of that problem?

We are not passing isLoadingNewOptions prop to the selection list for participants here

App/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

Lines 338 to 339 in 29ad878

	<SelectionList
	onConfirm={handleConfirmSelection}

What changes do you think we should make in order to solve the problem?

We should be passing isLoadingNewOptions prop to the selection list as for search page here

App/src/pages/SearchPage/index.js

Lines 169 to 170 in 29ad878

	isLoadingNewOptions={isSearchingForReports}
	/>

after subscribing to it as in here

App/src/pages/SearchPage/index.js

Lines 189 to 193 in 29ad878

	isSearchingForReports: {
	key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
	initWithStoredValues: false,
	},
	})(SearchPage);

What alternative solutions did you explore? (Optional)

[brunovjk]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When making a Request money, the circular loading does not appear when we search for contact

What is the root cause of that problem?

We are not setting isLoadingNewOptions correctly in MoneyTemporaryForRefactorRequestParticipantsSelector like we do in SearchPage.

What changes do you think we should make in order to solve the problem?

We need to get isSearchingForReports from onyx and use it in MoneyTemporaryForRefactorRequestParticipantsSelector SelectionList

What alternative solutions did you explore? (Optional)

[brunovjk]

I don't want to cause any problems here and I accept the review's decision. But I would really like to work on this issue, I noticed this bug a month ago, but I was waiting for Selection List Refactor so we can fix it. Report issue on slack.
Thanks in advance

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

1. Green circular loading not appearing when searching in Request money flow
2. Skeleton loading appears when searching in the Send money flow but doesn't appear in the Request money flow

What is the root cause of that problem?

1. We don't have isLoadingNewOptions={isSearchingForReports} in here like the NewChatPage, so the loading indicator does not show.

2. In the Send money flow here, we have the Skeleton loading whenever the user types something to search in the search input, this is inconsistent with the Request money flow where the Skeleton doesn't appear in this case (it only appears initially when first loading the list). This is because in Request money we have a different logic to show the skeleton placeholder based on the didScreenTransitionEnd and isOptionsDataReady here

What changes do you think we should make in order to solve the problem?

1. We need to connect to Onyx ONYXKEYS.IS_SEARCHING_FOR_REPORTS there and adds isLoadingNewOptions={isSearchingForReports} here

We need to do the same thing in the MoneyRequestParticipantsSelector too (For the Send money flow)

2. If we want the behavior in Request money page (not showing skeleton placeholder when searching), in Send money page we should update this to follow the same logic as in Request money page here. If instead we want to show skeleton placeholder when searching like Send money page, update request money page here to use isSearchingForReports similar to Send money page.

What alternative solutions did you explore? (Optional)

NA

[mollfpr]

Just a head-ups! I'll be reviewing the proposal from @brunovjk first since the posted the proposal along side with this bug report. Context: https://expensify.slack.com/archives/C01GTK53T8Q/p1708081508978019