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

@kadiealexander

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.

Go to staging.new.expensify.com
Go to any chat.
Submit two expenses.
Go to expense report.
Go offline.
Click on any expense row.
Click More > Delete.
Delete the expense.
Go back to main workspace chat.
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:

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

@kadiealexander

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.

🚨 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

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

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
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)

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

@rushatgabhane

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

@FitseTLT

Payments needed:

- Contributor: @FitseTLT paid $250 via Upwork (offer)
- Reviewer: @rushatgabhane owed $250 via manual request

@rushatgabhane please complete the checklist!

@kadiealexander

@kadiealexander Eep! 4 days overdue now. Issues have feelings too...

@kadiealexander

@kadiealexander Eep! 4 days overdue now. Issues have feelings too...

@rushatgabhane

@rushatgabhane bump on this!

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: https://github.com/Expensify/App/pull/56405/files#r2178823134
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: Not critical
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue: https://github.com/Expensify/Expensify/issues/521299

Regression Test Proposal

Precondition:

Test:

Go to any chat.
Submit two expenses.
Go to expense report.
Go offline.
Click on any expense row.
Click More > Delete.
Delete the expense.
Go back to main workspace chat.
Go online.
The preview of the deleted expense will disappear immediately after returning online.

Do we agree 👍 or 👎

Payment summary here.

@rushatgabhane

$250 approved for @rushatgabhane

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

26 remaining items

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on May 30, 2025

FitseTLT commented on May 30, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Jun 3, 2025

melvin-bot commented on Jun 3, 2025

26 remaining items

kadiealexander commented on Jun 25, 2025

melvin-bot commented on Jun 30, 2025

melvin-bot commented on Jun 30, 2025

kadiealexander commented on Jul 2, 2025

rushatgabhane commented on Jul 2, 2025

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

kadiealexander commented on Jul 3, 2025

garrettmknight commented on Jul 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions