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

[Julesssss]

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

[shubham1206agra]

@OfstadC Can we get an expert contributor here?

[NJ-2020]

Proposal

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

Blank page appears between authentication and loading UI

What is the root cause of that problem?

The root cause is not from useOnyx or withOnyx, the root cause is the AuthScreens component take a while to load
So right here we're using React lazy to load the AuthScreens, and we're passing null fallback inside the Suspense component when the AuthScreens is still loading

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

Lines 4 to 18 in 056e8ee

	const AuthScreens = lazy(() => lazyRetry(() => import('./AuthScreens')));
	const PublicScreens = lazy(() => lazyRetry(() => import('./PublicScreens')));
	type AppNavigatorProps = {
	/** If we have an authToken this is true */
	authenticated: boolean;
	};
	function AppNavigator({authenticated}: AppNavigatorProps) {
	if (authenticated) {
	// These are the protected screens and only accessible when an authToken is present
	return (
	<Suspense fallback={null}>
	<AuthScreens />
	</Suspense>

so when the AuthScreens is still loading since we pass null here it will show blank page

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

Lines 16 to 17 in 056e8ee

	<Suspense fallback={null}>
	<AuthScreens />

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

Instead of passing null here we can pass loading spinner using like FullScreenLoadingIndicator

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

Lines 16 to 17 in 056e8ee

	<Suspense fallback={null}>
	<AuthScreens />

What alternative solutions did you explore? (Optional)

[shubham1206agra]

Lets go with @NJ-2020's proposal.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @robertjchen, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

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

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

[melvin-bot]

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

[robertjchen]

Thanks for review and discussion. Agreed with @NJ-2020 's proposal!

[melvin-bot]

📣 @shubham1206agra 🎉 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]

📣 @NJ-2020 🎉 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 📖

[NJ-2020]

I will be OOO for 1 day

cc: @shubham1206agra

[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