Expense - "To" field appears with delay in confirmation page

[lanitochka17]

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.24-0
Reproducible in staging?: Y
**Reproducible in production?:**N
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to workspace chat
2. Click + > Request money > Distance
3. Enter addresses
4. Proceed to confirmation page

Expected Result:

Content will not appear with delay

Actual Result:

"To" field shows up late in confirmation page

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

Bug6337744_1704897441946.bandicam_2024-01-10_19-01-10-527.mp4

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @johnmlee101 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[dukenv0307]

Regression from this PR #31354.

[johnmlee101]

@hurali97 just FYI if this is a regression from your changes

[dukenv0307]

Proposal

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

"To" field shows up late on confirmation page

What is the root cause of that problem?

We initialize the data when the component is mounted and wrap it into InteractionManager.runAfterInteractions which makes the delay.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 132 in 55746c7

this.interactionTask = InteractionManager.runAfterInteractions(() => {

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

I think we should add an extra props like shouldInitialAfterInteraction with the default value as false

We will only initialize after the interaction If shouldInitialAfterInteraction is true

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 132 in 55746c7

this.interactionTask = InteractionManager.runAfterInteractions(() => {

We will pass it as true in some pages which we want the transaction smoother like SearchPage, StartChat, ...

What alternative solutions did you explore? (Optional)

We can change the default value of shouldInitialAfterInteraction to true and add this as false in confirm page and others which we need.

Or we can only wrap the interaction if the platform is not web and desktop.

[dukenv0307]

@johnmlee101 I can raise the PR to fix this ASAP if my proposal is approved.

[johnmlee101]

We reverted this #31354 (comment)

[situchan]

The fix reached staging. We can close this after QA pass

[mountiny]

This is done