[HOLD for payment 2024-09-18] [$50] Expensify Card - Expensify Card page loads infinitely

[IuliiaHerets]

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.31-5
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #48632
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Expensify Card.

Expected Result:

Expensify Card page will not load infinitely.

Actual Result:

Expensify Card page loads infinitely, unless user clicks on the same tab or refresh the page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6598003_1725915441991.s.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833256019789096800
• Upwork Job ID: 1833256019789096800
• Last Price Increase: 2024-09-10
• Automatic offers:
• DylanDylann | Reviewer | 103894214
• allgandalf | Contributor | 103894216

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

Triggered auto assignment to @sonialiap (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.

[melvin-bot]

Triggered auto assignment to @chiragsalian (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.

[melvin-bot]

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

[melvin-bot]

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

[Nodebrute]

Edited by proposal-police: This proposal was edited at {current_time}.

Proposal

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

Expensify Card - Expensify Card page loads infinitely

What is the root cause of that problem?

We set default value true to shouldShowLoading here

and then Here shouldShowLoading will be true

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 203 in fc33ac1

{(isLoading || firstRender.current) && shouldShowLoading && isFocused ? (

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

We should pass shouldShowLoading={false} here

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx

Line 77 in fc33ac1

<WorkspacePageWithSections

This page is already wrapped in withPolicyAndFullscreenLoading

and here we are also checking for isLoading

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 39 in fc33ac1

const isLoading = !isOffline && (!cardSettings || (cardSettings.isLoading && Object.keys(cardSettings).length === 1));

so we can safely set the value to false. PolicyRulesPage has same issue

What alternative solutions did you explore? (Optional)

We can pass shouldShowLoading={isLoadingReportData} here

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx

Line 77 in fc33ac1

<WorkspacePageWithSections

[daledah]

Edited by proposal-police: This proposal was edited at 2024-09-10 09:23:07 UTC.

Proposal

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

• Expensify Card page loads infinitely, unless user clicks on the same tab or refresh the page.

What is the root cause of that problem?

• The issue occurs due to the following condition:

  App/src/pages/workspace/WorkspacePageWithSections.tsx

  Line 203 in b90a6c6

  {(isLoading || firstRender.current) && shouldShowLoading && isFocused ? (

  which is always true because firstRender.current is always true.

• We are using firstRender as a ref. When its value changes, it doesn't trigger a re-render. Initially, firstRender.current is set to true, and when updated to false, the loading state remains displayed since no re-render occurs.

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

• We should use useState instead of useRef in:
  

  App/src/pages/workspace/WorkspacePageWithSections.tsx

  Line 149 in b90a6c6

  const firstRender = useRef(showLoadingAsFirstRender);

• And update this and this to reflect the new usage of useState.

What alternative solutions did you explore? (Optional)

Option 1

• We can use showLoadingAsFirstRender: false in case of WorkspaceExpensifyCardPageEmptyState in here:
  

  App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx

  Line 77 in 968b610

  <WorkspacePageWithSections

Option 2

• In other pages, we always wrap their contents by the WorkspacePageWithSections. So in this page, we should do the same.

1. First, remove:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx

Line 77 in 968b610

<WorkspacePageWithSections

2. Then, wrap this page:
   

   App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

   Line 42 in 968b610

   <AccessOrNotFoundWrapper

   
   by the WorkspacePageWithSection as we did with other page:

        <WorkspacePageWithSections
            shouldUseScrollView
            icon={Illustrations.HandCard}
            headerText={translate('workspace.common.expensifyCard')}
            route={route}
            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
            shouldShowOfflineIndicatorInWideScreen
        >

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[daledah]

Proposal updated

[allgandalf]

@daledah's RCA is correct, and their solution (option 2) tests well , we can proceed with them

Also @daledah can you point out the offending PR please

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignees @chiragsalian and @mountiny are eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[daledah]

I plan to revert all changes in PR, then apply my option 1 in my proposal:

We can use showLoadingAsFirstRender: false in case of WorkspaceExpensifyCardPageEmptyState in here

What do you think @chiragsalian @mountiny?

[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.31-26 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: Expensify card page loading infinitely #48874

If no regressions arise, payment will be issued on 2024-09-18. 🎊

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

• @rushatgabhane requires payment through NewDot Manual Requests
• @allgandalf requires payment automatic offer (Contributor)
• @daledah requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rushatgabhane / @allgandalf] The PR that introduced the bug has been identified. Link to the PR:
• [@rushatgabhane / @allgandalf] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@rushatgabhane / @allgandalf] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@rushatgabhane / @allgandalf] Determine if we should create a regression test for this bug.
• [@rushatgabhane / @allgandalf] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@sonialiap] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[AttockOffice85]

Contributor details
Your Expensify account email: attockofficeworkonly@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01c7ba3745b8d54a7f

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[AttockOffice85]

Hi, I am new as a contributor/user to the Expensify app.
And tried to enable Expensify Card(s) and few other features but failing again and again.

Kindly help in this regards.

Bug6598003_1725915441991-reproducing-issue.mp4

[Christinadobrzyn]

Hi there, can you check to see if this regression is related to this issue? I'm having trouble finding the PR linked.

[mountiny]

@Christinadobrzyn The linked issue seems to be purely oldDot and the changes in the issue are only in Newdot so I dont think it can be related

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @rushatgabhane owed $250 via NewDot
• ROLE: @daledah paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@sonialiap)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1833256019789096800/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[mountiny]

@daledah and @rushatgabhane $50

[sonialiap]

Payment summary:

• @daledah $50 - paid in upwork ✔️
• @rushatgabhane $50 - please complete the checklist - payment via NewDot

[melvin-bot]

@chiragsalian, @sonialiap, @rushatgabhane, @mountiny, @daledah Huh... This is 4 days overdue. Who can take care of this?

[sonialiap]

@rushatgabhane bumping for the checklist 😊

[mountiny]

@sonialiap This was a feature behind beta, and we will add the tests for this feature in one go as part of the project. I think for now we can skip the checklist and pay out

[sonialiap]

Sounds good 👍
Payment via Upwork completed already and Rushat will need to request via ND. Closing this since we don't need to fill out the checklist

[garrettmknight]

$50 approved for @rushatgabhane