[Payment due] [$250] Expense - Deleting IOU's in bulk shows empty report briefly

[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: V9.2.46-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory
Email or phone of affected tester (no customers): Slottwo1 72old.approver@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open 1:1 DM
3. Create 2 IOU 's
4. Open reports page
5. Select both IOU's and delete

Expected Result:

Deleting IOU's in bulk musn't show empty report briefly.

Actual Result:

Deleting IOU's in bulk shows empty report briefly.

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

Issue Owner

Current Issue Owner: @garrettmknight

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022026957601490903422
• Upwork Job ID: 2026957601490903422
• Last Price Increase: 2026-02-26
• Automatic offers:
• situchan | Reviewer | 110590175

[melvin-bot]

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

[FitseTLT]

Proposal

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

Expense - Deleting IOU's in bulk shows empty report briefly

What is the root cause of that problem?

We navigate back after deletion here

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 694 to 698 in 0be1450

	handleDeleteTransactions();
	if (shouldNavigateBack) {
	const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
	Navigation.goBack(backToRoute);
	}

but the onyx data gets updated too quick before the navigation animation ends so the empty state is seen briefly on slower platforms.

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

We can apply the same solution as here

App/src/components/MoneyReportHeader.tsx

Lines 1346 to 1351 in 0be1450

	// Money request should be deleted when interactions are done, to not show the not found page before navigating to goBackRoute
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	deleteTransactions([transaction.transactionID], duplicateTransactions, duplicateTransactionViolations, currentSearchHash, false);
	removeTransaction(transaction.transactionID);
	});

to delay handleDeleteTransactions a bit to make it happen after the navigation animation. But in our case we only need to delay if the user delete all the expenses as that is the only case we go back. As runAfterInteractions is deprecated now we can use any other delaying mechanism we use in other places.

What alternative solutions did you explore? (Optional)

[daledah]

Proposal

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

Deleting IOU's in bulk shows empty report briefly.

What is the root cause of that problem?

when delete the iou's we will handle the deletion along with navigation

App/src/components/MoneyReportHeader.tsx

Lines 1369 to 1375 in fb91ed0

	onConfirm={() => {
	if (transactions.filter((trans) => trans.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length === selectedTransactionIDs.length) {
	const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
	Navigation.goBack(backToRoute);
	}
	handleDeleteTransactions();
	}}

but the navigation may take more time than deleting the iou's, so we'll see the not found page briefly

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

We shouldn't use runAfterInteractions because it's a workaround and will be deprecated.

1. Create the ref shouldDeleteAfterGoback, set it to true here

Navigation.goBack(backToRoute);
shouldDeleteAfterGoback.current = true;

2. After the component unmounts (or lose focus), we'll delete the transactions

useEffect(() => {
        return () => {
            shouldDeleteAfterGoback.current && handleDeleteTransactions();
        };
    }, []);

we can do the same in here and here

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

Proposal

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

Deleting IOU's in bulk shows empty report briefly.

What is the root cause of that problem?

The goBack and delete actions are executed simultaneously here. However, due to a race condition between them, the delete action might update the Onyx data faster, causing the empty report state to appear before the navigation completes.

App/src/components/MoneyReportHeader.tsx

Lines 1263 to 1267 in 2087489

	if (transactions.filter((trans) => trans.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length === selectedTransactionIDs.length) {
	const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
	Navigation.goBack(backToRoute);
	}
	handleDeleteTransactions();

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 691 to 697 in c51a657

	onConfirm={() => {
	const shouldNavigateBack =
	transactions.filter((trans) => trans.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length === selectedTransactionIDs.length;
	handleDeleteTransactions();
	if (shouldNavigateBack) {
	const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
	Navigation.goBack(backToRoute);

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

Test branch

Only call handleDeleteTransactions after the transitionEnd event is emitted:

1. Add the event TRANSITION_END_SCREEN_WRAPPER:
   

   App/src/CONST/index.ts

   Lines 5476 to 5478 in 04315c9

   	EVENTS: {
   	SCROLLING: 'scrolling',
   	},

     EVENTS: {
         SCROLLING: 'scrolling',
+        TRANSITION_END_SCREEN_WRAPPER: 'transitionEndScreenWrapper',
     },

2. The TRANSITION_END_SCREEN_WRAPPER event will be emitted with the transitionEnd listener in ScreenWrapper:
   

   App/src/components/ScreenWrapper/index.tsx

   Lines 183 to 197 in 04315c9

   	// On iOS, the transitionEnd event doesn't trigger some times. As such, we need to set a timeout
   	const timeout = setTimeout(() => {
   	setDidScreenTransitionEnd(true);
   	onEntryTransitionEnd?.();
   	}, CONST.SCREEN_TRANSITION_END_TIMEOUT);
   	const unsubscribeTransitionEnd = navigation.addListener('transitionEnd', (event) => {
   	// Prevent firing the prop callback when user is exiting the page.
   	if (event?.data?.closing) {
   	return;
   	}
   	clearTimeout(timeout);
   	setDidScreenTransitionEnd(true);
   	onEntryTransitionEnd?.();
   	});

+        if (!isFocused) {
+            return;
+        }
         // On iOS, the transitionEnd event doesn't trigger some times. As such, we need to set a timeout
         const timeout = setTimeout(() => {
             setDidScreenTransitionEnd(true);
             onEntryTransitionEnd?.();
+            DeviceEventEmitter.emit(CONST.EVENTS.TRANSITION_END_SCREEN_WRAPPER);
         }, CONST.SCREEN_TRANSITION_END_TIMEOUT);
 
         const unsubscribeTransitionEnd = navigation.addListener('transitionEnd', (event) => {
@@ -194,6 +198,7 @@ function ScreenWrapper({
             clearTimeout(timeout);
             setDidScreenTransitionEnd(true);
             onEntryTransitionEnd?.();
+            DeviceEventEmitter.emit(CONST.EVENTS.TRANSITION_END_SCREEN_WRAPPER);
         });

3. handleDeleteTransactions will be called when the TRANSITION_END_SCREEN_WRAPPER event is emitted:
   

   App/src/components/MoneyReportHeader.tsx

   Lines 1311 to 1315 in 04315c9

   	if (transactions.filter((trans) => trans.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length === selectedTransactionIDs.length) {
   	const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
   	Navigation.goBack(backToRoute);
   	}
   	handleDeleteTransactions();

const shouldNavigateBack = transactions.filter((trans) => trans.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length === selectedTransactionIDs.length;
if (shouldNavigateBack) {
    const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
    Navigation.goBack(backToRoute);
    const listener = DeviceEventEmitter.addListener(CONST.EVENTS.TRANSITION_END_SCREEN_WRAPPER, () => {
        handleDeleteTransactions();
        listener.remove();
    });
} else {
    handleDeleteTransactions();
}

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 694 to 698 in 04315c9

	handleDeleteTransactions();
	if (shouldNavigateBack) {
	const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
	Navigation.goBack(backToRoute);
	}

if (shouldNavigateBack) {
    const backToRoute = route.params?.backTo ?? (chatReport?.reportID ? ROUTES.REPORT_WITH_ID.getRoute(chatReport.reportID) : undefined);
    Navigation.goBack(backToRoute);
    const listener = DeviceEventEmitter.addListener(CONST.EVENTS.TRANSITION_END_SCREEN_WRAPPER, () => {
        handleDeleteTransactions();
        listener.remove();
    });
} else {
    handleDeleteTransactions();
}

What alternative solutions did you explore? (Optional)

N/A

[IjaazA]

Proposal

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

When deleting IOUs in bulk from the reports page, the report view briefly displays an empty state before the report is removed. This creates a jarring user experience where users see an empty report flash on screen during the deletion process.

What is the root cause of that problem?

The root cause is in the MoneyRequestReportActionsList component (src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx at line 715). The component determines whether to show the empty state based on the following conditions:

isEmpty(visibleReportActions) && isEmpty(transactions) && !showReportActionsLoadingState

When bulk deletion occurs:

1. Transactions are optimistically marked with pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE
2. These transactions are filtered out from the transactions array that is passed to the component
3. If all transactions in a report are being deleted, both visibleReportActions and transactions become empty
4. The empty state condition evaluates to true, causing the empty state to be displayed
5. The empty state is shown briefly until the deletion completes and the report is removed from the view

The component already receives a hasPendingDeletionTransaction prop that indicates when there are transactions pending deletion, but this information is not being used to prevent the empty state from showing during deletion operations.

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

We should update the empty state condition in MoneyRequestReportActionsList to also check for pending deletion transactions. This will prevent the empty state from being displayed when transactions are in the process of being deleted.

Specific Change:
In src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx, update line 715 to include a check for hasPendingDeletionTransaction:

Before:

{isEmpty(visibleReportActions) && isEmpty(transactions) && !showReportActionsLoadingState ? (

After:

{isEmpty(visibleReportActions) && isEmpty(transactions) && !showReportActionsLoadingState && !hasPendingDeletionTransaction ? (

This ensures that when there are transactions pending deletion (hasPendingDeletionTransaction is true), the empty state will not be shown, even if both visibleReportActions and transactions are empty. The report view will continue to display its current content (or the FlatList with existing structure) until the deletion completes and the report is properly removed.

What alternative solutions did you explore? (Optional)

1. Delaying the empty state check: We could add a debounce or delay before showing the empty state, but this would be a workaround rather than addressing the root cause. It also might introduce other timing-related issues.

2. Using a different condition for empty state: We could check if the report itself exists or has other indicators of being valid, but the hasPendingDeletionTransaction prop is the most direct and accurate indicator that we're in the middle of a deletion operation.