[HOLD for payment 2024-07-10] [$250] [CRITICAL] [UX Reliability] When deeplinking to expense report from email empty screen is shown

[mountiny]

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:
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @danielrvidal
Slack conversation:

Action Performed:

1. daniel@expensify.com submitted danrvidal+upgradetest7@gmail.com an IOU.
2. danrvidal+upgradetest7@gmail.com got the email and clicked Pay , is taken to the sign in page, gets the magic code and logs in
3. danrvidal+upgradetest7@gmail.com is taken to directly to the expense.
4. The subheader is not loading right away and LHN chats are not loading right away.
5. After letting it load, I click into the DM and there is nothing showing.
   a. I let it load for a bit, nothing.
   b. I refresh and see the expense show up.

This makes for a confusing experience. As a side note, we’ll be updating the flow so we don’t send users to the expense directly but rather the DM (GH) but I still experienced this bug so it felt like we should update it.

Expected Result:

The DM chat should load immediately as well as the chats should be available in LHN first, we should wait for the openApp response and show the skeleton if its not available

Actual Result:

• Subheader not showing when I’m brought into a report for the first time as a new user, and the DM the IOU sent to me is not loading.
• The DM chat is showing empty screen

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

In slack here https://expensify.slack.com/archives/C05LX9D6E07/p1716940223060999?thread_ts=1716939884.285849&cid=C05LX9D6E07

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0167ada75a878e8b10
• Upwork Job ID: 1795785341708906496
• Last Price Increase: 2024-05-29
• Automatic offers:
• c3024 | Reviewer | 102542821

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (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]

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

[melvin-bot]

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

[Skakruk]

Proposal

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

Subheader not showing when user brought into a report for the first time as a new user, and the DM the IOU sent to me is not loading.
Also reproducible for any user, who received IOU link, on the first app load (after clearing DB) when the user navigates to IOU report directly.

What is the root cause of that problem?

On the first app load, we're making OpenApp request which blocks any other updates to Onyx, until it finishes.

App/src/libs/actions/OnyxUpdateManager/index.ts

Lines 74 to 80 in 15600b0

	if (isLoadingApp) {
	// When ONYX_UPDATES_FROM_SERVER is set, we pause the queue. Let's unpause
	// it so the app is not stuck forever without processing requests.
	SequentialQueue.unpause();
	console.debug(`[OnyxUpdateManager] Ignoring Onyx updates while OpenApp hans't finished yet.`);
	return;
	}

Since OpenReport request is established before the OpenApp, the Report data is skipped and not saved into IndexedDB.

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

We need to delay OpenReport request until OpenApp is made.

In ReportScreen.tsx we add

const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);

and add checks for isLoadingApp in a few places:

1. don't make fetchReportIfNeeded() call

   App/src/pages/home/ReportScreen.tsx

   Lines 472 to 480 in 21d7884

   	useEffect(() => {
   	// Call OpenReport only if we are not linking to a message or the report is not available yet
   	if (isLoadingReportOnyx || (reportActionIDFromRoute && report.reportID)) {
   	return;
   	}
   	fetchReportIfNeeded();
   	// eslint-disable-next-line react-hooks/exhaustive-deps
   	}, [isLoadingReportOnyx]);

2. for showing skeleton while the app is still loading

   App/src/pages/home/ReportScreen.tsx

   Line 377 in 21d7884

   const isLoading = !reportIDFromRoute || (!isSidebarLoaded && !isReportOpenInRHP) || PersonalDetailsUtils.isPersonalDetailsEmpty();

3. to condition shouldShowNotFoundPage for not showing "Report not found"

   App/src/pages/home/ReportScreen.tsx

   Line 388 in 21d7884

   const shouldShowNotFoundPage = useMemo(

Also add condition

if (report.reportID === reportIDFromRoute) {
    return;
}

to

App/src/pages/home/ReportScreen.tsx

Line 417 in 21d7884

const fetchReportIfNeeded = useCallback(() => {

to make sure we don't make a duplicate request for already loaded report.

load-report.mp4

[arosiclair]

I can manage this. Looks like we're having @kacper-mikolajczak take a look