Expensify Card - Card details change briefly when card details RHP is refreshed

izarutskaya commented 1 day ago

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.71-0 Reproducible in staging?: Yes Reproducible in production?: Yes If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A If this was caught during regression testing, add the test name, ID and link from TestRail: Exp Email or phone of affected tester (no customers): applausetester+kh1311020@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

Precondition:

Expensify Card feature is enabled.
User has assigned themselves a virtual card.

Go to staging.new.expensify.com
Go to workspace settings > Expensify Card.
Click on the virtual card.
Refresh the page.

Expected Result:

Expensify Card details will not change when card details RHP is refreshed.

Actual Result:

Virtual badge changes to Physical briefly.
Cardholder name is shown as Hidden briefly.
Remaining limit and card limit show 0.00 briefly.

Workaround:

Unknown

Platforms:

[ ] Android: Standalone
[ ] Android: HybridApp
[x] Android: mWeb Chrome
[ ] iOS: Standalone
[ ] iOS: HybridApp
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/1d298dfd-1389-40db-a77c-b051b5267d0e

View all open jobs on GitHub

melvin-bot[bot] commented 1 day ago

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

thelullabyy commented 1 day ago

Proposal

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

Expensify Card - Card details change briefly when card details RHP is refreshed

What is the root cause of that problem?

When reloading, the ONYX data isn't loaded It caused the default data is displayed in a moment

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

https://github.com/Expensify/App/blob/ccc5efdbccbc2b19f22431ab98df16f01b7d744e/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx#L51

const [cardsList, cardsListMetaData] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`); 

...

If (isLoadingOnyxValue(cardsListMetaData)) {
  return <FullScreenLoadingIndicator />
}

Also need to apply to company card detail page

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

DylanDylann commented 1 day ago

@mountiny This seems like a lack of when implementing this feature. Could I take over this one?

Expensify / App