[Due for payment 2026-01-20] Log in - Infinite loading appears when logging in via link https://staging.new.expensify.com/r/hellogorgeous

[lanitochka17]

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.2.38-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1469/folder/13176964/41237741/972471438
Email or phone of affected tester (no customers): shussain@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Logout if you’re currently logged in
2. Open the following link in your browser: https://staging.new.expensify.com/r/hellogorgeous
3. Log in using a Google account

Expected Result:

A skeleton loader should briefly appear, followed by the message: “Hmm... it’s not here.”

Actual Result:

An infinite loading screen is displayed after logging in

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6984340_1761414742532.2025-10-25_19-36-34.mp4

View all open jobs on GitHub

[melvin-bot]

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

[mohammadjafarinejad]

Proposal

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

An infinite loading screen is displayed after logging in via the provided link.

What is the root cause of that problem?

We are using isLoadingApp in the memo, but we are not passing it to the dependency list

App/src/pages/home/ReportScreen.tsx

Lines 480 to 501 in 65c6ed7

	// eslint-disable-next-line rulesdir/no-negated-variables
	const shouldShowNotFoundPage = useMemo(
	(): boolean => {
	if (shouldShowNotFoundLinkedAction) {
	return true;
	}
	if (isLoadingApp !== false) {
	return false;
	}
	// eslint-disable-next-line react-compiler/react-compiler
	if (!wasReportAccessibleRef.current && !firstRenderRef.current && !reportID && !isOptimisticDelete && !reportMetadata?.isLoadingInitialReportActions && !userLeavingStatus) {
	// eslint-disable-next-line react-compiler/react-compiler
	return true;
	}
	return !!currentReportIDFormRoute && !isValidReportIDFromPath(currentReportIDFormRoute);
	},
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	[firstRender, shouldShowNotFoundLinkedAction, reportID, isOptimisticDelete, reportMetadata?.isLoadingInitialReportActions, userLeavingStatus, currentReportIDFormRoute],
	);

Because isLoadingApp is not included in the dependency list, the hook does not re-run when isLoadingApp changes (from undefined → true → false after login).
This causes the UI to remain stuck in the loading state until the page is refreshed.

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

Add isLoadingApp here

App/src/pages/home/ReportScreen.tsx

Line 500 in 65c6ed7

[firstRender, shouldShowNotFoundLinkedAction, reportID, isOptimisticDelete, reportMetadata?.isLoadingInitialReportActions, userLeavingStatus, currentReportIDFormRoute],

Result

TEST_73506.mp4

What alternative solutions did you explore? (Optional)

None

[paulnjs]

Proposal

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

Log in - Infinite loading appears when logging in via link https://staging.new.expensify.com/r/hellogorgeous

What is the root cause of that problem?

The navigation logic here:

App/src/libs/actions/Report.ts

Lines 3603 to 3606 in 9c3ecb2

	if (report?.errorFields?.notFound || report?.reportID) {
	Onyx.disconnect(reportConnection);
	navigateHandler(report);
	}

...doesn't always trigger because the backend sets the report data under the key report_0 instead of the expected report_hellogorgeous. As a result, the report variable ends up being undefined, and the app doesn't proceed with navigation.

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

We should update the conditional check to explicitly handle the undefined case by modifying the logic as follows:

App/src/libs/actions/Report.ts

Line 3603 in 9c3ecb2

if (report?.errorFields?.notFound || report?.reportID) {

if (report?.errorFields?.notFound || report?.reportID || report === undefined) {

With this change, if the report is undefined, the app will continue with its fallback logic and navigate to the most recently accessed report, preserving the expected user experience.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

[dmkt9]

Proposal

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

An infinite loading screen is displayed after logging in

What is the root cause of that problem?

When the reportID from the deeplink is invalid—for example, "hellogorgeous"—the server returns a value with the key report_0

However, in openReportFromDeepLink, we’re listening to ${ONYXKEYS.COLLECTION.REPORT}${reportID}, so it will never be resolved.

App/src/libs/actions/Report.ts

Lines 3598 to 3608 in bceff96

	const reportConnection = Onyx.connect({
	key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
	// eslint-disable-next-line rulesdir/prefer-early-return
	callback: (report) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (report?.errorFields?.notFound || report?.reportID) {
	Onyx.disconnect(reportConnection);
	navigateHandler(report);
	}
	},
	});

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

We should add a validity check for reportID here.

App/src/libs/actions/Report.ts

Lines 3593 to 3597 in bceff96

	if (
	reportID &&
	!isAuthenticated &&
	(!reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] || !reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.reportID)
	) {

This can be done by creating a helper function called isValidReportID.
A reportID is considered valid if it contains only numeric characters and its value does not exceed Number.MAX_SAFE_INTEGER. These conditions can be discussed further during the PR phase.

App/src/libs/ReportUtils.ts

Lines 6035 to 6045 in bceff96

	/**
	* Generate a random reportID up to 53 bits aka 9,007,199,254,740,991 (Number.MAX_SAFE_INTEGER).
	* There were approximately 98,000,000 reports with sequential IDs generated before we started using this approach, those make up roughly one billionth of the space for these numbers,
	* so we live with the 1 in a billion chance of a collision with an older ID until we can switch to 64-bit IDs.
	*
	* In a test of 500M reports (28 years of reports at our current max rate) we got 20-40 collisions meaning that
	* this is more than random enough for our needs.
	*/
	function generateReportID(): string {
	return (Math.floor(Math.random() * 2 ** 21) * 2 ** 32 + Math.floor(Math.random() * 2 ** 32)).toString();
	}

function isValidReportID(reportID: string) {
    return /^\d+$/.test(reportID) && reportID.length <= Number.MAX_SAFE_INTEGER.toString().length;
}

App/src/libs/actions/Report.ts

Lines 3593 to 3597 in bceff96

	if (
	reportID &&
	!isAuthenticated &&
	(!reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] || !reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.reportID)
	) {

if (
    reportID &&
    isValidReportID(reportID) &&
    !isAuthenticated &&
    (!reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] || !reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.reportID)
) {

What alternative solutions did you explore? (Optional)

[lorretheboy]

Proposal

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

Log in - Infinite loading appears when logging in via link https://staging.new.expensify.com/r/hellogorgeous

What is the root cause of that problem?

When user accesses invalid reportID deeplink (e.g., https://staging.new.expensify.com/r/hellogorgeous)

The client calls openReport(reportID) with the invalid ID (e.g., "hellogorgeous")

The server returns report data with the key report_0 instead of report_hellogorgeous to indicate the report doesn't exist

The client sets up an Onyx connection listening to report_hellogorgeous, but the server's response goes to report_0

The callback never fires because it's listening to the wrong key, causing an infinite loading screen

App/src/libs/actions/Report.ts

Line 3485 in 4df272e

function openReportFromDeepLink(

App/src/libs/actions/Report.ts

Lines 3598 to 3608 in 4df272e

	const reportConnection = Onyx.connect({
	key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
	// eslint-disable-next-line rulesdir/prefer-early-return
	callback: (report) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (report?.errorFields?.notFound || report?.reportID) {
	Onyx.disconnect(reportConnection);
	navigateHandler(report);
	}
	},
	});

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

We should wait for IS_CHECKING_PUBLIC_ROOM to be set to false instead, which indicates the OpenReport API call has completed. This is more reliable than listening to specific report keys because when the reportID is invalid, the server returns data with key report_0 instead of report_reportID.

                                const publicRoomConnection = Onyx.connect({
                                    key: ONYXKEYS.IS_CHECKING_PUBLIC_ROOM,
                                    callback: (isCheckingPublicRoom) => {
                                        if (isCheckingPublicRoom === false) {
                                            Onyx.disconnect(publicRoomConnection);
                                            navigateHandler();
                                        }
                                    },
                                });

App/src/libs/actions/Report.ts

Lines 3598 to 3608 in 4df272e

	const reportConnection = Onyx.connect({
	key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
	// eslint-disable-next-line rulesdir/prefer-early-return
	callback: (report) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (report?.errorFields?.notFound || report?.reportID) {
	Onyx.disconnect(reportConnection);
	navigateHandler(report);
	}
	},
	});

What alternative solutions did you explore? (Optional)

We should add a second connection listening to ${ONYXKEYS.COLLECTION.REPORT}0 to catch invalid reportID responses from the server

When either connection receives data indicating the report is invalid or found, both connections are disconnected and the navigation handler is called

Add below here

                                const report0Connection = Onyx.connect({
                                    key: `${ONYXKEYS.COLLECTION.REPORT}0`,
                                    callback: (report) => {
                                        // If report_0 has data, it means the reportID is invalid
                                        if (report?.reportID === '0' || report?.errorFields?.notFound) {
                                            Onyx.disconnect(reportConnection);
                                            Onyx.disconnect(report0Connection);
                                            navigateHandler(report);
                                        }
                                    },
                                });

App/src/libs/actions/Report.ts

Lines 3598 to 3608 in 4df272e

	const reportConnection = Onyx.connect({
	key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
	// eslint-disable-next-line rulesdir/prefer-early-return
	callback: (report) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (report?.errorFields?.notFound || report?.reportID) {
	Onyx.disconnect(reportConnection);
	navigateHandler(report);
	}
	},
	});

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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