Reports load infinitely after reset app, open Inbox -> Workspace, then open Report

[nlemma]

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: v9.2.1-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: #66890
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11 / Chrome. Android 13 / Xiaomi Poco F5, Android 13 / Chrome, macOS 14.5 / MacBook Air 2020
App Component: Other

Action Performed:

Precondition:

• At least have a workspace

1. Login to ND
2. Submit an expense on the workspace chat
3. Go to the Reports, reports load fine without issue
4. Go to Account > Troubleshoot > Clear cache and restart > Reset and refresh
5. Go to Inbox > Workspace > Reports
6. Verify that the reports load infinitely

Expected Result:

Reports can be load without any issues

Actual Result:

Reports load infinitely after reset app, open Inbox -> Workspace, then open Report
Note:

• Not reproduce on iOS environment

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6934034_1756889932038.69693_-_PR66890_-_Reports_load_infinitely_after_reset_app_open_Inbox_-_Workspace__then_open_Report.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @linhvovan29546

[melvin-bot]

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

[flaviadefaria]

This feels like an edge case to me, so I am removing the deploy blocker label.

[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 - @linhvovan29546 (External)

[huult]

Proposal

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

Reports load infinitely after reset app, open Inbox -> Workspace, then open Report

What is the root cause of that problem?

When we reset the app, the snapshot will be deleted from Onyx.

Screen.Recording.2025-09-03.at.22.38.54.mp4

After that, we navigate to Inbox → Workspace → Report tab. At this point, the hook that triggers the search to fetch data does not execute because when we first went to Inbox, the component had already rendered, triggered the call, and returned early. Therefore, when navigating from Inbox → Workspace → Report, the search is not called, and the Search API cannot get the snapshot to set Onyx. This is why the loading spinner remains visible indefinitely

App/src/components/Search/index.tsx

Line 331 in fa83fa5

handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals});

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

To resolve this issue, I think we should trigger the Search API call when the snapshot data has been removed, so we can retrieve the snapshot data from the API. We use the flag shouldResetSearchQuery to detect this case

App/src/components/Search/index.tsx

Lines 699 to 710 in fa83fa5

	useEffect(() => {
	const currentRoute = Navigation.getActiveRouteWithoutParams();
	if (hasErrors && (currentRoute === '/' || (shouldResetSearchQuery && currentRoute === '/search'))) {
	// Use requestAnimationFrame to safely update navigation params without overriding the current route
	requestAnimationFrame(() => {
	Navigation.setParams({q: buildCannedSearchQuery()});
	});
	if (shouldResetSearchQuery) {
	setShouldResetSearchQuery(false);
	}
	}
	}, [hasErrors, queryJSON, searchResults, shouldResetSearchQuery, setShouldResetSearchQuery]);

update to:

    useEffect(() => {
        const currentRoute = Navigation.getActiveRouteWithoutParams();
        if (hasErrors && (currentRoute === '/' || (shouldResetSearchQuery && currentRoute === '/search'))) {
            // Use requestAnimationFrame to safely update navigation params without overriding the current route
            requestAnimationFrame(() => {
                Navigation.setParams({q: buildCannedSearchQuery()});
            });

            if (shouldResetSearchQuery) {
                setShouldResetSearchQuery(false);
            }
        } else if (!hasErrors && shouldResetSearchQuery && currentRoute === '/search') {
            setShouldResetSearchQuery(false);
            handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals});
        }
    }, [hasErrors, queryJSON, searchResults, shouldResetSearchQuery, setShouldResetSearchQuery, isFocused, handleSearch, searchKey, offset, shouldCalculateTotals]);

Screen.Recording.2025-09-03.at.22.45.02.mov

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

none

What alternative solutions did you explore? (Optional)

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.

Alternatively, we can add isFocused as a dependency for this hook so that it triggers when the component re-renders. Currently, this hook does not run when switching tabs because the component already rendered on the Inbox tab

App/src/components/Search/index.tsx

Line 335 in fa83fa5

}, [handleSearch, isOffline, offset, queryJSON, searchKey, shouldCalculateTotals]);

}, [handleSearch, isOffline, offset, queryJSON, searchKey, shouldCalculateTotals, isFocused]);

[marufsharifi]

Proposal

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

Reports load infinitely after reset app, open Inbox -> Workspace, then open Report

What is the root cause of that problem?

When we clear the cache, all onyx states get removed. Then we don't call the search api again to get the search result and fall into an infinite loading state.

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

We should call search when the search page is focused.

App/src/components/Search/index.tsx

Lines 290 to 305 in c46f457

	useEffect(() => {
	const focusedRoute = findFocusedRoute(navigationRef.getRootState());
	const isMigratedModalDisplayed = focusedRoute?.name === NAVIGATORS.MIGRATED_USER_MODAL_NAVIGATOR || focusedRoute?.name === SCREENS.MIGRATED_USER_WELCOME_MODAL.ROOT;
	if ((!isFocused && !isMigratedModalDisplayed) || isOffline) {
	return;
	}
	const results = searchResults
	? getSections(type, searchResults.data, searchResults.search, accountID, formatPhoneNumber, groupBy).map((element) => element?.reportID ?? CONST.REPORT.DEFAULT_REPORT_ID)
	: [];
	handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals, prevReports: results});
	// We don't need to run the effect on change of isFocused.
	// eslint-disable-next-line react-compiler/react-compiler
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [handleSearch, isOffline, offset, queryJSON, searchKey, shouldCalculateTotals]);

We only need to add isFocused to the list of useEffect dependencies.

 }, [handleSearch, isOffline, offset, queryJSON, searchKey, shouldCalculateTotals, isFocused]);

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

None

What alternative solutions did you explore? (Optional)