[Due for payment 2026-03-17] [$250] Reports - Empty state screen displayed after approving or paying expense.

[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: 9.3.8.0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-3391/folder/13176923/41237529/1146029350
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 (Hybrid app) - Windows 11 / Chrome
App Component: Search

Action Performed:

Prerequisites:

• Account has at least one workspace.
• Delayed submissions and approvals enabled.
• No expenses exist before

1. Open the Expensify app.
2. Open any workspace chat.
3. Create a manual expense.
4. Navigate to "Reports" > "Expenses"
5. Tap on "Submit" on preview of the just created expense.
6. Tap on "Approve"
7. Note that empty state screen is shown for a few seconds after this action.
8. Mark the expense as paid.
9. Note that empty state screen appears again for a few seconds.

Expected Result:

After approving or paying an expense while on "Expenses" section on "Reports", preview of the expense should remain visible and status should change.

Actual Result:

After approving or paying an expense while on "Expenses" section on "Reports", empty state screen appears for a few seconds before expenses list becomes visible again.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7056876_1769221680467.State.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022015916025382582194
• Upwork Job ID: 2015916025382582194
• Last Price Increase: 2026-02-02

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Proposal

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

After approving or paying an expense while on "Reports" > "Expenses" section, an empty state screen appears briefly for a few seconds before the expenses list becomes visible again. This creates a jarring user experience.

What is the root cause of that problem?

The issue is in src/components/Search/index.tsx where the empty state is shown based on shouldShowEmptyState:

App/src/components/Search/index.tsx

Lines 1076 to 1089 in d2334c9

	const visibleDataLength = filteredData.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
	if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchDataType)) {
	cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
	return (
	<View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
	<EmptySearchView
	similarSearchHash={similarSearchHash}
	type={type}
	hasResults={searchResults?.search?.hasResults}
	queryJSON={queryJSON}
	/>
	</View>
	);
	}

When a user performs an action (Submit/Approve/Pay):

1. The expense's status changes (e.g., from "open" to "approved" or "paid")
2. The expense is removed from the current search snapshot via successData in Search.ts
3. If this was the only/last visible expense, visibleDataLength becomes 0
4. shouldShowEmptyState(isDataLoaded, visibleDataLength, searchDataType) returns true
5. Empty state is shown
6. Then the search API refreshes and brings back updated data
7. Empty state disappears

The component doesn't account for the "transitioning" state when an action is being processed. Compare this with how sorting is handled in SearchPage.tsx:

App/src/pages/Search/SearchPage.tsx

Lines 597 to 603 in d2334c9

	const [isSorting, setIsSorting] = useState(false);
	let searchResults: SearchResults | undefined;
	if (currentSearchResults?.data) {
	searchResults = currentSearchResults;
	} else if (isSorting) {
	searchResults = lastNonEmptySearchResults.current;
	}

When sorting, the component keeps showing the previous results. But when an action is performed, there's no similar mechanism to prevent showing the empty state.

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

We should not show the empty state when there's an action currently loading. The component already tracks this via isActionLoadingSet:

App/src/components/Search/index.tsx

Line 253 in d2334c9

const [isActionLoadingSet = new Set<string>()] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}`, {canBeMissing: true, selector: isActionLoadingSetSelector});

Modify the empty state check to also consider whether any action is currently loading:

+ const isAnyActionLoading = isActionLoadingSet.size > 0;
  const visibleDataLength = filteredData.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
- if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchDataType)) {
+ if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchDataType) && !isAnyActionLoading) {
      cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
      return (
          <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
              <EmptySearchView
                  similarSearchHash={similarSearchHash}
                  type={type}
                  hasResults={searchResults?.search?.hasResults}
                  queryJSON={queryJSON}
              />
          </View>
      );
  }

When an action is loading (isAnyActionLoading is true), we skip showing the empty state, allowing the list to remain visible until the data is fully refreshed.

What alternative solutions did you explore? (Optional)

An alternative would be to use a similar approach to sorting - keeping track of lastNonEmptySearchResults and using it during action processing. However, using isActionLoadingSet is simpler and already available in the component.

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

The Reports > Expenses list briefly shows an empty state when approving or paying an expense. This happens because the expense is removed from the list after its status changes, before the backend confirms the action and refreshes the data.

What is the root cause of that problem?

The earliest wrong assumption is that all expense actions set loading metadata during optimistic updates. This is wrong because approveMoneyRequest, submitReport, and payMoneyRequest actions do not set isActionLoading in REPORT_METADATA when triggered from the Report view. Because of this, the Search list applies status filtering immediately and removes the item before the backend response arrives.

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

Ensure all expense actions set isActionLoading in REPORT_METADATA during optimistic updates so the Search list keeps items visible.

File: src/libs/actions/IOU/index.ts

Update getPayMoneyRequestParams to include REPORT_METADATA updates:

// src/libs/actions/IOU/index.ts
// ... existing code ...
if (!full) {
    const holdReportOnyxData = getReportFromHoldRequestsOnyxData(
        chatReport,
        iouReport,
        recipient,
        reportPolicy,
    );

    optimisticData.push(...holdReportOnyxData.optimisticData);
    successData.push(...holdReportOnyxData.successData);
    failureData.push(...holdReportOnyxData.failureData);

    optimisticHoldReportID = holdReportOnyxData.optimisticHoldReportID;
    optimisticHoldActionID = holdReportOnyxData.optimisticHoldActionID;
    optimisticHoldReportExpenseActionIDs = JSON.stringify(
        holdReportOnyxData.optimisticHoldReportExpenseActionIDs,
    );
}

if (iouReport?.reportID) {
    optimisticData.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${iouReport.reportID}`,
        value: {
            isActionLoading: true,
        },
    });

    successData.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${iouReport.reportID}`,
        value: {
            isActionLoading: false,
        },
    });

    failureData.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${iouReport.reportID}`,
        value: {
            isActionLoading: false,
        },
    });
}

return {
    params: {
        // ... existing code ...
    },
};

Update approveMoneyRequest to include REPORT_METADATA updates:

// src/libs/actions/IOU/index.ts
// ... existing code ...

// @ts-expect-error - will be solved in https://github.com/Expensify/App/issues/73830
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const optimisticData: OnyxUpdate[] = [
    optimisticIOUReportData,
    optimisticReportActionsData,
    optimisticNextStepData,
    ...(optimisticChatReportData ? [optimisticChatReportData] : []),
];

optimisticData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${expenseReport.reportID}`,
    value: {
        isActionLoading: true,
    },
});

const successData: OnyxUpdate[] = [
    {
        onyxMethod: Onyx.METHOD.MERGE,
        // ... existing code ...
    },
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
        value: {
            pendingFields: {
                partial: null,
                nextStep: null,
            },
        },
    },
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${expenseReport.reportID}`,
        value: {
            isActionLoading: false,
        },
    },
];

const failureData: OnyxUpdate[] = [
    {
        onyxMethod: Onyx.METHOD.MERGE,
        // ... existing code ...
        key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${expenseReport.reportID}`,
        value: expenseReportCurrentNextStepDeprecated ?? null,
    },
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${expenseReport.reportID}`,
        value: {
            isActionLoading: false,
        },
    },
];

// Clear hold reason of all transactions if we approve all requests
// ... existing code ...

Update submitReport to include REPORT_METADATA updates:

// src/libs/actions/IOU/index.ts
// ... existing code ...

optimisticData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${expenseReport.reportID}`,
    value: optimisticNextStepDeprecated,
});

optimisticData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${expenseReport.reportID}`,
    value: {
        isActionLoading: true,
    },
});

if (parentReport?.reportID) {
    optimisticData.push({
        onyxMethod: Onyx.METHOD.MERGE,
        // ... existing code ...
    });
}

successData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
    value: {
        [optimisticSubmittedReportAction.reportActionID]: {
            pendingAction: null,
        },
    },
});

successData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${expenseReport.reportID}`,
    value: {
        isActionLoading: false,
    },
});

const failureData: Array<
    OnyxUpdate<
        | typeof ONYXKEYS.COLLECTION.REPORT
        | typeof ONYXKEYS.COLLECTION.NEXT_STEP
        | typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS
        | typeof ONYXKEYS.COLLECTION.REPORT_METADATA
    >
> = [
    {
        onyxMethod: Onyx.METHOD.MERGE,
        // ... existing code ...
    },
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${expenseReport.reportID}`,
        value: expenseReportCurrentNextStepDeprecated ?? null,
    },
    {
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${expenseReport.reportID}`,
        value: {
            isActionLoading: false,
        },
    },
];

failureData.push({
    onyxMethod: Onyx.METHOD.MERGE,
    // ... existing code ...
});

What alternative solutions did you explore? (Optional)

We considered updating Search/index.tsx to hide the empty state when any action is loading. This was not chosen because it hides the symptom. The real issue is missing loading metadata in the actions, which the Search logic already supports.