[Due for payment 2025-10-21] [$250] Expense - Imported transactions are displayed as skeleton loader after deleting card feed

[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.1.88-0
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/test-runs/TR-330/folder/12015291/39317426/816208925?sort=%2Bidentifier
Email or phone of affected tester (no customers): sdjinojoiddsio@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Search

Action Performed:

Precondition:

• User has added Wells Fargo card feed and assigned themselves Plaid Credit Card 3333.
• There is at least one imported card transaction.

1. Go to staging.expensify.com
2. Go to workspace chat.
3. Go to workspace settings > Company cards.
4. Click Settings.
5. Click Remove card feed > Delete.
6. Go to workspace chat.

Expected Result:

The imported transactions will be completely removed.

Actual Result:

The imported transactions are displayed as skeleton loader.

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

Bug6904894_1754027574583.20250801_135034.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021951301364743518388
• Upwork Job ID: 1951301364743518388
• Last Price Increase: 2025-08-15
• Automatic offers:
• nkdengineer | Contributor | 108561949

Issue Owner

Current Issue Owner: @clarajones-expensify

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[abdoulzak]

Proposal

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

When a user deletes a Wells Fargo card feed from workspace Company Cards settings, the imported transactions continue to display as persistent skeleton loaders in the Search interface instead of being properly removed. These skeleton loaders never resolve and remain visible indefinitely.

What is the root cause of that problem?

The root cause is in the deleteWorkspaceCompanyCardFeed()

App/src/libs/actions/CompanyCards.ts

Line 206 in a8175e0

const successAndFailureCardUpdates = Object.fromEntries(cardIDs.map((cardID) => [cardID, {pendingAction: null}]));

When deleting a card feed, the cards are not properly removed from Onyx on successful deletion. The same successAndFailureCardUpdates object is used for both success and failure scenarios.
This means cards are never actually deleted on success - they remain with {pendingAction: null}, creating an inconsistent state where:

1. The feed is deleted correctly
2. The cards persist instead of being deleted
3. Transactions become orphaned as they reference cards that should be deleted but still exist
4. The UI displays skeleton loaders because isEmptyObject(transaction) returns true for these orphaned transactions

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

Separate the success and failure card update logic in src/libs/actions/CompanyCards.ts

1. Replace
   

   App/src/libs/actions/CompanyCards.ts

   Line 206 in a8175e0

   const successAndFailureCardUpdates = Object.fromEntries(cardIDs.map((cardID) => [cardID, {pendingAction: null}]));

with two separate objects:

• successCardUpdates that sets cards to null (properly deleting them)
• failureCardUpdates that sets cards to {pendingAction: null} (restoring them)

2. Update the successData and failureData
   

   App/src/libs/actions/CompanyCards.ts

   Lines 246 to 253 in a8175e0

   	value: successAndFailureCardUpdates,
   	},
   	{
   	onyxMethod: Onyx.METHOD.MERGE,
   	key: ONYXKEYS.CARD_LIST,
   	value: successAndFailureCardUpdates,
   	},
   	];

   
   to use successCardUpdates and failureCardUpdates

This follows the established Onyx pattern where deleted items are set to null on success.

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

[nkdengineer]

Proposal

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

The imported transactions are displayed as skeleton loader.

What is the root cause of that problem?

When we unassign the card or remove the card feed, the backend clears multiple transactions from the card.

For each merge transaction, the Onyx.connect callback is fired, and the derived value is calculated again. For each time, sourceValues is the updated transaction, but transactions is already updated for all transactions

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 12 in bc8c57e

compute: ([transactions, violations], {sourceValues, currentValue}) => {

That causes the previousReportID of the transaction to be undefined after the first time a transaction is cleared, and then other transactions are not cleared from the expense report, except the first transaction.

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 37 in bc8c57e

const previousReportID = previousTransaction?.reportID;

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 76 in bc8c57e

previousTransactions = transactions;

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

Instead of getting the previousReportID from the previous transaction, we can create a mapping to store the reportID of the transaction

const transactionReportIDMapping: Record<string, string> = {};
const previousReportID = transactionReportIDMapping[transactionKey];

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 37 in bc8c57e

const previousReportID = previousTransaction?.reportID;

if (!transaction && transactionReportIDMapping[transactionKey]) {
    delete transactionReportIDMapping[transactionKey];
}

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 46 in bc8c57e

transactionReportIDMapping[transactionKey] = reportID;

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 57 in bc8c57e

We can also update transactionID here by getting this from translationKey instead.

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 41 in bc8c57e

const transactionID = previousTransaction?.transactionID;

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

None

What alternative solutions did you explore? (Optional)

We can only update the previousTransactions and previousViolations of the changed transaction inside here instead

reportTransactionsAndViolations[reportID].transactions[transactionKey] = transaction;
previousTransactions[transactionKey] = transaction;
previousViolations[violationKey] = transactionViolations;

// previousTransactions = transactions;
// previousViolations = violations;

App/src/libs/actions/OnyxDerived/configs/reportTransactionsAndViolations.ts

Line 76 in bc8c57e

previousTransactions = transactions;

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.

[clarajones-expensify]

Hi @rojiphil - would you please review the above proposals?