[HOLD for payment 2024-07-30] [$250] [Search v1] Settings - Delay in avatar highlight and blank Search page when opening from Inbox

[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: 9.0.3-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com/settings/preferences/priority-mode
2. Click Account settings
3. Go to Inbox
4. Go to Search

Expected Result:

In Step 2, avatar will be instantly highlighted when clicking on Account settings
In Step 4, Search page will open instantly

Actual Result:

In Step 2, avatar is not instantly highlighted when clicking on Account settings
In Step 4, Search page opens with blank page for a few seconds

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

Bug6526861_1719530887474.20240628_070751.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011ff0642a6c2f2946
• Upwork Job ID: 1806537464995654813
• Last Price Increase: 2024-06-28
• Automatic offers:
• ikevin127 | Reviewer | 102989312

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @robertjchen (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[lanitochka17]

@robertjchen FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011ff0642a6c2f2946

[melvin-bot]

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

[nkdengineer]

Proposal

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

In Step 2, avatar is not instantly highlighted when clicking on Account settings
In Step 4, Search page opens with blank page for a few seconds

What is the root cause of that problem?

The check to show loading isn't correct.

App/src/components/Search.tsx

Line 95 in 1d607ac

const isLoadingItems = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;

isLoadingOnyxValue(searchResultsMeta) is only true at the first time this key is loaded in Onyx. So after the first time we open the search page, the blank will appear when the search API is called.

About the delay bug, I think it maybe related here https://expensify.slack.com/archives/C01GTK53T8Q/p1719497873778469

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

We should change to show the loading if the onyx value is loading or the search api is calling

const isLoadingItems = (!isOffline && (isLoadingOnyxValue(searchResultsMeta) || currentSearchResults?.search.isLoading)) || searchResults?.data === undefined;

App/src/components/Search.tsx

Line 95 in 1d607ac

const isLoadingItems = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;

What alternative solutions did you explore? (Optional)

NA

[mountiny]

cc @luacmartins

[luacmartins]

I wonder if we can simplify the loading condition to just !isOffline && searchResults?.data === undefined. I think we should have data defined in all other instances when we got a response from the API so that would either display the empty state or the data

[ikevin127]

@luacmartins' suggestion is a definite improvement on the Search page loading logic.

Regarding the bottom tam navigator tab switch UI delay, it still happens and I checked the slack discussion about the recent introduction of React StrictMode and this does not seem to be the issue as the behaviour is also present on latest staging.

Not sure which direction we should move forward with this issue:

1. Go with nkdengineer's proposal which would only improve the Search page loading logic.
2. Keep looking for proposals for one that would fix the issue entirely including the bottom tab navigator tab switch delays.

cc @mountiny @robertjchen

[Zakpak0]

Proposal

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

On the Expensify Website, the bottom tab navigator has a significant delay when switching tabs.

(a) The Account avatar is not highlighted immediately.

(b) The search tab renders content after an unwarranted delay.

What is the root cause of that problem?

(a) The navigation state is not being reported to child components promptly.

(b) Rendering logic needs to be improved for the search tab.

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

(a)
Within the tab navigator component, the current route is being reported via the ActiveTabContext.
We can utilize this to fix our problem with a few edits.
This should be renamed to ActiveBottomTabContext as it only ever reports the state of the bottom tab.
Additionally, the navigation state currently fed to this Context is a bit limited in scope.
It should be expanded to report all changes to the bottom tabs vs just the routes that are referred to as CentralPlaneRoutes
Now when we useContext in our child components we will get an immediate report and re-render the state. This will show the Account avatar highlighted immediately on tab change, rather than after a delay.

(b) Apply the solution provided in comment by @luacmartins

The solution can be reviewed here on my test branch

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @Zakpak0! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Zakpak0]

Contributor details
Your Expensify account email: zakharyoliver808@gmail.com
Upwork Profile Link: (https://www.upwork.com/freelancers/~0144a75be415af6251)

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.7-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix bottom tab highlight delay #44931

If no regressions arise, payment will be issued on 2024-07-24. 🎊

For reference, here are some details about the assignees on this issue:

• @ikevin127 requires payment automatic offer (Reviewer)
• @Zakpak0 requires payment (Needs manual offer from BZ)

[ikevin127]

@luacmartins @robertjchen Can you please add the Bug label to assign somebody for payments ?

Note: I don't think we need a BZ Checklist here since the issue wasn't caused by any recent PR, but instead it's more of a performance improvement task.

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lschurr]

@Zakpak0 - can you link your Upwork profile here so that I can send along the offer?

[lschurr]

Payment summary:

• Contributor: @Zakpak0 $250 (paid in Upwork)
• Reviewer: @ikevin127 $250 (paid in Upwork)

[Zakpak0]

@Zakpak0 - can you link your Upwork profile here so that I can send along the offer?

@lschurr sure https://www.upwork.com/freelancers/~0144a75be415af6251

[ikevin127]

@lschurr 👋 Before closing here, there's one more payment due on 30th coming from a follow-up polishing PR #45663 which I reviewed. More context on the payment due date here and confirmation that it should be handled in this issue from Carlos in #45663 (comment).

⚠️ Looks like automation failed -> reason for which the 2nd payment due date wasn't added to this issue automatically.

[lschurr]

@Zakpak0 - sent offer here in Upwork

[lschurr]

I'll change the date in the title for the other payment that's due on the 30th. That PR was created by @WojtekBoman and reviewed by @ikevin127 - so we just need payment for you, right Kevin?

[ikevin127]

@lschurr Yes, only for me as reviewer since the author is from SWM. Thank you!

[ikevin127]

cc @lschurr

[lschurr]

@ikevin127 - I added a bonus rather than sending a new offer on this one.

Additional $250 paid in Upwork for this PR.