[Due for payment 2025-11-14] Investigate violations under a receipt on the one expense report view not showing sometimes

[mountiny]

Shawn raised in this thread that on staging a receipt that shows some violations, it does not show the specific violations under the receipt. It is showing correctly when signed in again in incognito mode. Can you investigate, given the onyx state, why the violations are not showing and fix that to be always showing. https://expensify.slack.com/archives/C049HHMV9SM/p1760350193472079?thread_ts=1760340175.741989&cid=C049HHMV9SM

Note: the data is in internal thread so this is available only for internal developers/ c+ and experts

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-13 11:27:11 UTC.

Proposal

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

Investigate violations under a receipt on the one expense report view not showing sometimes

What is the root cause of that problem?

Sometimes the receipt isn't loaded, so the violation doesn't show here

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Line 322 in 92086c0

{!!shouldShowAuditMessage && hasReceipt && !isLoading && receiptAuditMessagesRow}

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

We can remove isLoading condition here. Or we can set isLoading to false when the image fails to load

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Line 322 in 92086c0

{!!shouldShowAuditMessage && hasReceipt && !isLoading && receiptAuditMessagesRow}

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)

Only checking the isLoading state if we're in wide RHP view

{!!shouldShowAuditMessage && hasReceipt && (!isLoading || !fillSpace) && receiptAuditMessagesRow}

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Line 322 in 92086c0

{!!shouldShowAuditMessage && hasReceipt && !isLoading && receiptAuditMessagesRow}

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.

[RKCODE2015]

Proposal

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

When a user views an expense report, critical violation messages that should appear directly under a receipt are sometimes missing. This inconsistent behavior can confuse the user, as they might not be aware of important issues with their expense that require action. The issue appears to resolve itself upon a fresh session (like in Incognito mode), suggesting a problem related to the component's loading state rather than a lack of data.

What is the root cause of that problem?

The root cause is an incorrect dependency in the rendering logic within the MoneyRequestReceiptView.tsx component. The display of the violation messages is incorrectly coupled with the loading state of the receipt image.

The current logic to render the violation messages is as follows:

show_violations IF (there_are_violations_to_show) AND (a_receipt_exists) AND (the_image_has_finished_loading)

The problematic condition is the final one: (the_image_has_finished_loading). This creates a race condition. If the violation data loads quickly but the receipt image loads slowly (or fails to load entirely), the critical violation messages will never be rendered because the component is still waiting for a non-critical image.

This is a logical flaw, as the textual violation information is not dependent on the visual receipt image itself. They should render independently.

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

The solution is to decouple the rendering of violation messages from the image's loading state. We should remove the !isLoading check from the conditional statement that controls the visibility of receiptAuditMessagesRow.

This ensures that as soon as the violation data is available, it will be displayed to the user, regardless of how long the receipt image takes to load.

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Current Code:

// Problem: The "!isLoading" condition blocks violation messages from rendering
// until the image has completely loaded.
{!!shouldShowAuditMessage && hasReceipt && !isLoading && receiptAuditMessagesRow}

Proposed Change:

// Fix: Remove the "!isLoading" dependency. Violation messages will now
// render as soon as they are available.
{!!shouldShowAuditMessage && hasReceipt && receiptAuditMessagesRow}

This change is simple, direct, and addresses the root cause of the issue by correcting the component's rendering logic.

What alternative solutions did you explore? (Optional)

1. Setting isLoading to false on image load failure: One alternative is to add an onError handler to the image component to ensure isLoading is set to false if the image fails to load. While this would solve the problem for failed images, it would not fix the issue for images that are simply slow to load. The user would still have to wait for the image, which is not ideal.

2. Making the check conditional on the view: Another idea was to only apply the !isLoading check in certain layouts (e.g., when the receipt is not filling the full space). This is a symptom-based fix, not a root cause fix. It would make the code more complex and would not solve the underlying logical flaw, which could reappear in other layouts or future refactors.

Ultimately, both alternatives are partial or indirect fixes. The most robust solution is to remove the incorrect dependency entirely, as proposed above.

[abdulrahuman5196]

@dukenv0307 , I tested by mocking the code and sending empty string as source for the image, and the image load failed and the violations where also not shown. So the RCA hypothesis is correct. And also tested with the isLoading state which is also working.

could you kindly update your proposal with all the information discussed in the slack?

[abdulrahuman5196]

@dukenv0307 's proposal here #72444 (comment) looks good and works well.

🎀 👀 🎀
C+ Reviewed