Report view header is missing skeleton while app is loading

[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.39-0
Reproducible in staging?: Y
Reproducible in production?: N
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 offline.
3. Go to Account settings > Troubleshoot > Clear reset and restart.
4. Click Reset and refresh.
5. Go back to Inbox.
6. Compare the header on the report view on staging and production while app is loading.

Expected Result:

The report view header will have skeleton while app is loading (production behavior).

Actual Result:

The report view header is missing skeleton while app is loading.
The issue is more obvious when the window is not in full screen mode (Mac).

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6609800_1726826154949.20240920_175112.mp4

View all open jobs on GitHub

[melvin-bot]

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

[grgia]

Environment	Screenshot
Staging
Production

[grgia]

Confirmed with test revert it was caused by #49056

[BhuvaneshPatil]

Proposal

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

Report view header is missing skeleton while app is loading

What is the root cause of that problem?

In the mentioned PR #49056, we modified this lines

App/src/pages/home/ReportScreen.tsx

Lines 285 to 305 in c666296

	let headerView = report && (
	<HeaderView
	reportID={reportIDFromRoute}
	onNavigationMenuButtonClicked={onBackButtonPress}
	report={report}
	parentReportAction={parentReportAction}
	shouldUseNarrowLayout={shouldUseNarrowLayout}
	/>
	);
	if (isSingleTransactionView && report) {
	headerView = (
	<MoneyRequestHeader
	report={report}
	policy={policy}
	parentReportAction={parentReportAction}
	shouldUseNarrowLayout={shouldUseNarrowLayout}
	onBackButtonPress={onBackButtonPress}
	/>
	);
	}

It makes header view null and it doesn't appear. Because report is null when app is loading.

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

App/src/pages/home/ReportScreen.tsx

Line 730 in c666296

{headerView}

We can modify this line as

{headerView??<ReportHeaderSkeletonView/>}

So in case we don't have headerView it will show skeleton

Result -

Screen.Recording.2024-09-20.at.6.28.03.PM.mov

What alternative solutions did you explore? (Optional)

[BhuvaneshPatil]

@grgia I can raise a quick PR if you want

[daledah]

@grgia I'll raise a follow-up ASAP.

[grgia]

thank you @BhuvaneshPatil, I'm going to ask @daledah raise the PR as this bug is a regression from #49056

[BhuvaneshPatil]

No worries. I hope the changes suggested maybe of use for resolving the bug. Thanks.

[daledah]

@grgia PR is up.

Additionally, there might be some other components can be rendered without report besides HeaderView that I might've missed. Please let me know if there are any so I can include the changes in this PR as well. Thanks!