[$250] Blank page appears between authentication and loading UI

[Julesssss]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.41-1 and earlier
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): Customer accounts with a medium-large amount of data

Action Performed:

• Device is on a slow or restricted network
• Launch New Expensify app
• Log in with an account with many reports

Expected Result:

• There will be no white screen after login

Actual Result:

• White screen appears briefly after login

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

372109345-c082d55a-26d9-4ade-973d-e1562d5262f7.mov

371763733-127dec60-2e34-4b95-af30-0bae07ce10b2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021840753836543659093
• Upwork Job ID: 1840753836543659093
• Last Price Increase: 2024-11-25
• Automatic offers:
• shubham1206agra | Reviewer | 105126183
• NJ-2020 | Contributor | 105126185

Issue Owner

Current Issue Owner: @NJ-2020

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Julesssss]

Hey @blazejkustra, in case you are interested... I also added your repro video.

[melvin-bot]

@Julesssss, @OfstadC, @shubham1206agra Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@Julesssss, @OfstadC, @shubham1206agra Still overdue 6 days?! Let's take care of this!

[Julesssss]

We need good reproduction steps before making this open to contributors.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mvtglobally]

Still reproducing on slow network
https://github.com/user-attachments/assets/64c5f9ee-0576-45dc-b36a-4c96c64f9ee9

[truph01]

Cannot reproduce this issue after we migrate to useOnyx.

[Julesssss]

@truph01, can you reproduce on web when throttling the network?

[truph01]

@Julesssss No, I cannot reproduce in both web and ios after this PR is merged.

[Julesssss]

Okay thank you. It looks like the PR was merged just after the latest test. Lets retry once more.

[truph01]

@Julesssss FYI, the above PR is reverted, so the bug can be reproduced.

[melvin-bot]

@robertjchen, @OfstadC, @shubham1206agra, @NJ-2020 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[NJ-2020]

After digging into the issue, I think my solution is not the suitable solution for this issue because after adding FullScreenLoadingIndicator the blank screen still appears but with small duration

And also the loading spinner display every time like open the web, sign out, etc
And also if we login into an account and then logout and then login again the blank screens still display and the loading spinner is not shown, I think because the AuthScreens is loaded but maybe the AuthScreens component still loading which causes blank screen

---

So should I keep digging or we should reopen the issue to contributor?

cc: @shubham1206agra

[shubham1206agra]

@NJ-2020 Can you please keep digging?

[melvin-bot]

@robertjchen, @OfstadC, @shubham1206agra, @NJ-2020 Huh... This is 4 days overdue. Who can take care of this?

[shubham1206agra]

@NJ-2020 Update please

[NJ-2020]

Hi, I am very sorry.
I am OOO now for few days.
i am currently mourning my father who has passed away yesterday.

Thanks

cc: @shubham1206agra

[melvin-bot]

@robertjchen, @OfstadC, @shubham1206agra, @NJ-2020 Eep! 4 days overdue now. Issues have feelings too...

[shubham1206agra]

Waiting for @NJ-2020 to come back.

[robertjchen]

My condolences, no rush 🙏

[NJ-2020]

Update:

• Loading spinner (solution) doesn't work because If I add like loading spinner, the loading spinner will be displayed every time the AuthScreens loading like logout, opening the app

Solution
I think after we login before redirecting/displaying AuthScreens page we can wait until the AuthScreens component fully loaded and then we can add loading spinner in the login page when the AuthScreens page is still loading

cc: @shubham1206agra wdyt?

[shubham1206agra]

I believe this can work. @NJ-2020 Do you have a POC for this?

[NJ-2020]

@shubham1206agra Not yet

After doing some digging into the code, I found:

• Instead of using Suspense we can use like isBottomtabbarLoaded(not exist but if I am not mistaken this key is exist before) because if we use Suspense the blank screen still appear I think maybe due to some components inside the AuthScreens, this also to make sure that we will hide the loading spinner if the bottom tab bar has been rendered
• And also I think to prevent the loading spinner from being displayed every time the AuthScreens component is loading, we can put the loading spinner around this if statement to make sure that we're displaying the loading spinner after we're authenticated(after login)
  

  App/src/libs/Navigation/AppNavigator/index.tsx

  Lines 13 to 15 in 9412d21

  	if (authenticated) {
  	// These are the protected screens and only accessible when an authToken is present
  	return (

[NJ-2020]

@shubham1206agra Good news, It worked! But I still have an issue for android (native), I will try to dig again

Demo:

IOS (native)	IOS (mWeb)
Simulator.Screen.Recording.-.iPhone.15.-.2024-12-30.at.07.16.29.1.mp4	Simulator.Screen.Recording.-.iPhone.15.-.2024-12-30.at.07.26.30.mp4

[shubham1206agra]

@NJ-2020 What is the current progress on this?

[NJ-2020]

@shubham1206agra Sorry I've been busy with some issues, I will try to fix for Android issue because the loader is displayed while the content is loaded for about 1/1.5 seconds

[NJ-2020]

Update:

• I cannot reproduce this issue on android using poor internet:

First attempt	Second attempt
test123.mp4	test124.mp4

But inside the second attempt (android native) the empty blocking view inside LHN is shown briefly before the chat list is showed

• The issue is still reproducible on IOS native

Demo
Simulator.Screen.Recording.-.iPhone.15.-.2025-01-13.at.17.25.45.mp4

@shubham1206agra Could please attempt reproduction on Android native please, and re-confirm?

[NJ-2020]

@shubham1206agra Bump for the above ^

[shubham1206agra]

@OfstadC Can you add retest label here? And also, can you test hybrid app in this too?

[NJ-2020]

@shubham1206agra If this issue is not reproducible in Android I think we can still fix it in IOS, web and desktop only