[$250] Reports - Expense preview shows infinite loading spinner in Chats for payer

[jponikarchuk]

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.1.84-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2148171/folder/12015266/test-cases/39317114
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: MacBook Ait 15.5 Chrome, iPhone 15 iOS 18.5 Safari
App Component: Search

Action Performed:

1. Create 2 gmail accounts - User A and User B
2. As User B, stay on the Account tab
3. As User A, create a chat with User B and create a manual expense in the chat
4. As User B, navigate to the Reports tab, click "Chats" and observe the preview of the received expense

Expected Result:

Infinite loading spinner is not displayed on the received expense preview in the Reports/ Chats

Actual Result:

Expense preview shows infinite loading spinner in the Reports/ Chats for payer, if the expense report was not opened before. Reproducible with expensifail account too. On Hybrid app repro, when SS enabled, user navigated to the Reports/Chats and cleared cache

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021950466669231952227
• Upwork Job ID: 1950466669231952227
• Last Price Increase: 2025-07-30

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

[Ducica]

Proposal

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

When user B makes an expense, with chat to user A, if user A goes directly to search chats, there is infinite loader on the preview.

What is the root cause of that problem?

If you don't actually open the report, the conditional here evaluates to true and stays true.

const shouldShowLoading = !chatReportMetadata?.hasOnceLoadedReportActions && transactions.length === 0;

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

I know it is not ideal, but I am unable to find a better solution on the front end side than to open the chatReport in MoneyRequestReportPreviewContent in certain conditions as such:

useEffect(() => {
        if (!chatReportID || !shouldShowLoading) {
            return;
        }

        openReport(chatReportID);
    }, [chatReportID, shouldShowLoading]);

On the other hand, it seems that when user B makes a report, and sends it, it seems that user A does not get this report via socket connection, so it could also be some problem on the BE.

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

N/A

What alternative solutions did you explore? (Optional)

N/A

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.

[bernhardoj]

Proposal

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

Infinite loading or empty expense shown in Chats list item when receiving new money request from another user without opening the report.

What is the root cause of that problem?

The loading will show when the transactions is empty.

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Line 118 in 233790a

const shouldShowLoading = !chatReportMetadata?.hasOnceLoadedReportActions && transactions.length === 0;

In my case, the empty expense view is shown because I already load the report at least once, but the transaction list is empty.

The transaction list comes from useReportWithTransactionsAndViolations. If we check the search snapshot data, the transaction is actually exist. But in useReportWithTransactionsAndViolations, we get the transaction from useAllReportsTransactionsAndViolations

App/src/hooks/useReportWithTransactionsAndViolations.ts

Lines 18 to 26 in 233790a

	const allReportTransactionsAndViolations = useAllReportsTransactionsAndViolations();
	const {transactions, violations} = allReportTransactionsAndViolations?.[reportID ?? CONST.DEFAULT_NUMBER_ID] ?? {transactions: DEFAULT_TRANSACTIONS, violations: DEFAULT_VIOLATIONS};
	const {isOffline} = useNetwork();
	const filteredTransactions = useMemo(
	() => Object.values(transactions).filter((transaction) => isOffline || transaction?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
	[transactions, isOffline],
	);
	return [report, filteredTransactions ?? DEFAULT_FILTERED_TRANSACTIONS, violations];

which comes from the onyx derived value.

App/src/components/OnyxListItemProvider.tsx

Line 21 in 233790a

const [ReportTransactionsAndViolationsProvider, , useAllReportsTransactionsAndViolations] = createOnyxContext(ONYXKEYS.DERIVED.REPORT_TRANSACTIONS_AND_VIOLATIONS);

It's derived from the onyx transactions collection which doesn't have the transaction. So, when we open the Chats tab, the transaction is loaded into the search snapshot data only. This issue happens after #65247. Previously, we use useOnyx to get the transaction data which will automatically use the search snapshot data when we are in a search page.

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

We can add the useOnyx usage back to get the transaction, but we can return the result only if we are on search.

const {isOnSearch} = useSearchContext();
const [transactions2] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
    selector: (_transactions) => isOnSearch ? reportTransactionsSelector(_transactions, reportID) : null,
    canBeMissing: true,
});

const filteredTransactions = useMemo(
    () => Object.values(transactions2 ?? transactions).filter((transaction) => isOffline || transaction?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
    [transactions, isOffline, transactions2],
);

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

We can test the hook and make sure it returns the transaction when isOnSearch is true and it's only available in snapshot data

[melvin-bot]

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

[melvin-bot]

@sonialiap 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[melvin-bot]

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