[Due for Payment 2026-02-27][$250] Expense - Blank skeleton shown after submitting to WS from self DM

[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.3.5-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: #79580
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Windows 11 pro /Chrome
App Component: Money Requests

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create WS
3. Go to self DM and create expense
4. Go offline
5. Open the expense detail and submit to someone
6. Submit to workspace
7. Open the expense

Expected Result:

The detail page should be shown even if the user is in offline mode

Actual Result:

Blank skeleton shown after submitting to WS from self DM

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022014789441422514642
• Upwork Job ID: 2014789441422514642
• Last Price Increase: 2026-01-30

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[annaweber830]

Proposal

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

When a user creates an expense from a self-DM, goes offline, submits it to a workspace, and then opens that expense, the expense detail page renders a blank loading skeleton instead of showing the cached detail view.

What is the root cause of that problem?

This issue happens when the workspace has no reports.The expense detail screen resolves the “linked transaction” via the transaction-thread report’s parentReportID + parentReportActionID (which points to a money request action containing originalMessage.IOUTransactionID). During the “submit to workspace” conversion flow, the transaction thread isn’t reliably updated to reference the new money request report/action, so when offline the UI can’t find the parent action/transaction and falls back to a skeleton.

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

• In the tracked-expense → money request conversion (“submit to workspace”) optimistic Onyx updates, explicitly update the transaction-thread report to:
  • set parentReportID to the new money request report ID
  • set parentReportActionID to the new money request action ID (when available)
• Add a fallback to derive the transaction thread report ID from the original tracked-expense action’s childReportID if it isn’t passed through.
• Ensure the failure data reverts the transaction thread report if the API request fails.
  

  App/src/libs/actions/IOU/index.ts

  Lines 5514 to 5582 in e54cfd4

  	const getConvertTrackedExpenseInformation = (
  	transactionID: string | undefined,
  	actionableWhisperReportActionID: string | undefined,
  	moneyRequestReportID: string | undefined,
  	linkedTrackedExpenseReportAction: OnyxTypes.ReportAction,
  	linkedTrackedExpenseReportID: string,
  	transactionThreadReportID: string | undefined,
  	resolution: IOUAction,
  	isLinkedTrackedExpenseReportArchived: boolean | undefined,
  	) => {
  	const optimisticData: Array<
  	OnyxUpdate<typeof ONYXKEYS.COLLECTION.TRANSACTION | typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS | typeof ONYXKEYS.COLLECTION.REPORT | typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS>
  	> = [];
  	const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS | typeof ONYXKEYS.COLLECTION.REPORT>> = [];
  	const failureData: Array<
  	OnyxUpdate<typeof ONYXKEYS.COLLECTION.TRANSACTION | typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS | typeof ONYXKEYS.COLLECTION.REPORT | typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS>
  	> = [];
  	// Delete the transaction from the track expense report
  	const {
  	optimisticData: deleteOptimisticData,
  	successData: deleteSuccessData,
  	failureData: deleteFailureData,
  	} = getDeleteTrackExpenseInformation(
  	linkedTrackedExpenseReportID,
  	transactionID,
  	linkedTrackedExpenseReportAction,
  	isLinkedTrackedExpenseReportArchived,
  	false,
  	true,
  	actionableWhisperReportActionID,
  	resolution,
  	true,
  	);
  	optimisticData?.push(...deleteOptimisticData);
  	successData?.push(...deleteSuccessData);
  	failureData?.push(...deleteFailureData);
  	// Build modified expense report action with the transaction changes
  	const modifiedExpenseReportAction = buildOptimisticMovedTransactionAction(transactionThreadReportID, linkedTrackedExpenseReportID ?? CONST.REPORT.UNREPORTED_REPORT_ID);
  	optimisticData?.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`,
  	value: {
  	[modifiedExpenseReportAction.reportActionID]: modifiedExpenseReportAction,
  	},
  	});
  	successData?.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`,
  	value: {
  	[modifiedExpenseReportAction.reportActionID]: {pendingAction: null},
  	},
  	});
  	failureData?.push({
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`,
  	value: {
  	[modifiedExpenseReportAction.reportActionID]: {
  	...modifiedExpenseReportAction,
  	errors: getMicroSecondOnyxErrorWithTranslationKey('iou.error.genericEditFailureMessage'),
  	},
  	},
  	});
  	return {optimisticData, successData, failureData, modifiedExpenseReportActionID: modifiedExpenseReportAction.reportActionID};
  	};

const getConvertTrackedExpenseInformation = (
    transactionID: string | undefined,
    actionableWhisperReportActionID: string | undefined,
    moneyRequestReportID: string | undefined,
    moneyRequestPreviewReportActionID: string | undefined,
    linkedTrackedExpenseReportAction: OnyxTypes.ReportAction,
    linkedTrackedExpenseReportID: string,
    transactionThreadReportID: string | undefined,
    resolution: IOUAction,
    isLinkedTrackedExpenseReportArchived: boolean | undefined,
) => {
    const optimisticData: Array<
        OnyxUpdate<typeof ONYXKEYS.COLLECTION.TRANSACTION | typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS | typeof ONYXKEYS.COLLECTION.REPORT | typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS>
    > = [];
    const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS | typeof ONYXKEYS.COLLECTION.REPORT>> = [];
    const failureData: Array<
        OnyxUpdate<typeof ONYXKEYS.COLLECTION.TRANSACTION | typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS | typeof ONYXKEYS.COLLECTION.REPORT | typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS>
    > = [];

    // Delete the transaction from the track expense report
    const {
        optimisticData: deleteOptimisticData,
        successData: deleteSuccessData,
        failureData: deleteFailureData,
    } = getDeleteTrackExpenseInformation(
        linkedTrackedExpenseReportID,
        transactionID,
        linkedTrackedExpenseReportAction,
        isLinkedTrackedExpenseReportArchived,
        false,
        true,
        actionableWhisperReportActionID,
        resolution,
        true,
    );

    optimisticData?.push(...deleteOptimisticData);
    successData?.push(...deleteSuccessData);
    failureData?.push(...deleteFailureData);

    const resolvedTransactionThreadReportID = transactionThreadReportID ?? linkedTrackedExpenseReportAction.childReportID;
    const transactionThreadReport = resolvedTransactionThreadReportID ? allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${resolvedTransactionThreadReportID}`] ?? null : null;

    if (resolvedTransactionThreadReportID && moneyRequestReportID) {
        optimisticData.push({
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.REPORT}${resolvedTransactionThreadReportID}`,
            value: {
                parentReportID: moneyRequestReportID,
                ...(moneyRequestPreviewReportActionID ? {parentReportActionID: moneyRequestPreviewReportActionID} : {}),
            },
        });

        if (transactionThreadReport) {
            failureData.push({
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.REPORT}${resolvedTransactionThreadReportID}`,
                value: transactionThreadReport,
            });
        }
    }

    // Build modified expense report action with the transaction changes
    const modifiedExpenseReportAction = buildOptimisticMovedTransactionAction(resolvedTransactionThreadReportID, linkedTrackedExpenseReportID ?? CONST.REPORT.UNREPORTED_REPORT_ID);

    optimisticData?.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${resolvedTransactionThreadReportID}`,
        value: {
            [modifiedExpenseReportAction.reportActionID]: modifiedExpenseReportAction,
        },
    });
    successData?.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${resolvedTransactionThreadReportID}`,
        value: {
            [modifiedExpenseReportAction.reportActionID]: {pendingAction: null},
        },
    });
    failureData?.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${resolvedTransactionThreadReportID}`,
        value: {
            [modifiedExpenseReportAction.reportActionID]: {
                ...modifiedExpenseReportAction,
                errors: getMicroSecondOnyxErrorWithTranslationKey('iou.error.genericEditFailureMessage'),
            },
        },
    });

    return {optimisticData, successData, failureData, modifiedExpenseReportActionID: modifiedExpenseReportAction.reportActionID};
};

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[CortneyOfstad]

Hey @Ollyws! There is a proposal above for review – thanks!

[Ollyws]

Will get to this one tomorrow.