[Due for payment 2025-06-25] [$250] Expense - Expense preview is blank briefly when deleted offline and returning online

[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.54-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+300506kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.4 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Go to staging.new.expensify.com
2. Go to any chat.
3. Submit two expenses.
4. Go to expense report.
5. Go offline.
6. Click on any expense row.
7. Click More > Delete.
8. Delete the expense.
9. Go back to main workspace chat.
10. Go online.

Expected Result:

The preview of the deleted expense will disappear immediately after returning online.

Actual Result:

The preview of the deleted expense becomes blank briefly after returning online.

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/~021929752908827516446
• Upwork Job ID: 1929752908827516446
• Last Price Increase: 2025-06-03
• Automatic offers:
• FitseTLT | Contributor | 107617425

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (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]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-30 18:35:08 UTC.

Proposal

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

Expense - Expense preview is blank briefly when deleted offline and returning online

What is the root cause of that problem?

We have passed shouldHIdeOnDelete as true for the offline so it hides it when there is pending delete online

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Line 180 in df2c3c1

shouldHideOnDelete={shouldHideOnDelete}

but it appears as an empty box because the parent View has a fixed width set.

App/src/styles/utils/getMoneyRequestReportPreviewStyle/index.ts

Line 32 in 0a8ae6b

transactionPreviewStyle: {width: currentWrapperWidth > minimalWrapperWidth ? TRANSACTION_WIDTH_WIDE : transactionPreviewWidth},

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Line 171 in 0a8ae6b

<View style={[transactionWrapperStyles, containerStyles]}>

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

1. We can take the parent view component inside the OfflineWithFeedback to follow the approach we use in other places so that the OfflineWithFeedback will hide it when online
   

   App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

   Lines 171 to 172 in 0a8ae6b

   	<View style={[transactionWrapperStyles, containerStyles]}>
   	<OfflineWithFeedback

   
   we will only need some additional style tweaking so that it will not show unnecessary spacings linked to the hidden previews. Or apply the OfflineWithFeedback on a higher parent componet of TransactionPreviewContent
2. Or, we can filter out pending delete transactions when online
   

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

   Line 54 in df2c3c1

   const [iouReport, transactions, violations] = useReportWithTransactionsAndViolations(iouReportID);

 const {isOffline} = useNetwork();
    const [iouReport, transactionsList, violations] = useReportWithTransactionsAndViolations(iouReportID);
    const transactions = transactionsList?.filter((transaction) => transaction?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline);
  

We can optionally take this filter in useReportWithTransactionsAndViolations if we want it to generally apply it.
We need to check if similar problems occur in other components such as MoneyRequestPreviewContent and apply similar fix.

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)

[melvin-bot]

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

[melvin-bot]

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