Web -Workspace-Blank space appear for a brief moment after refreshing the page

[kavimuru]

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

---

Action Performed:

Precondition: Add VBA into your testing account

1. Go to https://staging.new.expensify.com/
2. Log in with any account ( I used High traffic account)
3. Make sure the bank account added
4. Go to any Workspace
5. Select Reimburse expenses
6. Refresh the page

Expected Result:

There is no blank space appeared for a brief moment after refresh

Actual Result:

Blank space appear for a brief moment after refresh

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• Android

Version Number: 1.1.66-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+0901abb@applause.expensifail.com / Feya87Katya
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5584441_Recording__476.mp4

Bug5584441_Screen_Recording_20220524-154210_New_Expensify.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 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 @francoisl (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[francoisl]

The blank space is almost unnoticeable on my personal account and also on web with the high traffic account applausetester+0901abb@applause.expensifail.com, I only notice it on mWeb.

I can't tell if it's a regression or a fix of some sort though - on production, the label "Unlock next-day reimbursements" appears as a placeholder until the view gets updated with "Fast reimbursements = happy members!". So I'm assuming there's something that makes a network request to know what exact message the user should be shown, and the staging app doesn't show anything until that network request has received a response.

Going to dig a bit more to verify this hypothesis though.

• Production:

screen-20220524-154353.mp4

• Staging:

screen-20220524-154334.mp4

[francoisl]

There are 2 separate Get calls that are made when the user clicks Reimburse Expenses:

• Get nameValuePairs with nvp name = expensify_freePlanBankAccountID,
• Get nameValuePairs, bankAccountList with nvpNames=private_failedBankValidations_,expensify_migration_2020_04_28_RunKycVerifications,expensify_ACHData_throttled,private_throttledHistory_BankAccount_Get

And that hasn't changed on this version that is currently on staging. The only change is that we no longer show the wrong placeholder "Unlock next-day reimbursements", so I would lean on this not being a blocker or regression. Curious for other opinions though.

[amyevans]

This was a purposeful fix for #9057. While I agree it's not the most optimal to have that brief delay while the ACH state is loading, I think it's an improvement over what was in place. Shouldn't be a deploy blocker at the least.

[Julesssss]

Thanks both, I agree that this is an overall improvement and shouldn't hold up deployment. 👍

[Julesssss]

I guess now the question is: should we leave this open as an improvement? I'd say probably not, but happy either way.

[francoisl]

I agree with not even keeping this as an improvement. The solutions I can think of would be:

• Add a skeleton screen while the network requests are pending. However that sounds like a bigger project we might want to plan out in detail first, and potentially use those skeletons every time some UI components are drawn after a network request completes (and also would most likely be on hold until the Offline First changes are finished)
  Random example of what I'm talking about:
  
• Load the NVPs and bankAccountList preemptively, and store them in Onyx - but I don't think that would be a suitable solution because we get NVPs like expensify_ACHData_throttled and private_throttledHistory_BankAccount_Get, which we probably don't want to cache in Onyx, and instead load every time.
• ??

[francoisl]

Going to close this since the root issue should be fixed now. We can consider adding skeleton UI later.