[HOLD for payment 2024-12-16] [$250] Violation tab briefly blinks when open for the first time

[IuliiaHerets]

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.0.68-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Issue was found when executing this PR: #53095
Issue reported by: Applause Internal Team

Action Performed:

Precondition: Enable debug mode in Settings > Troubleshoot (on Hybrid app tap with 4 fingers on display). Expense is submitted in the chat.

1. Go to chat > tap on expense
2. Tap on expense details page header
3. Tap on Debug > View transaction
4. Tap on Violations tab > Create
5. Tap Save
6. Tap on created violation

Expected Result:

Debug - Transaction Violation page opens without blink.

Actual Result:

Debug - Transaction Violation page briefly blinks for the first opening.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6679453_1732823894300.Screenrecorder-2024-11-28-21-47-09-920.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @twisterdotcom

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863571590316301120
• Upwork Job ID: 1863571590316301120
• Last Price Increase: 2024-12-02
• Automatic offers:
• paultsimura | Reviewer | 105164657
• daledah | Contributor | 105164658
• shubham1206agra | Contributor | 105577983

[melvin-bot]

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

[daledah]

Proposal

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

Debug - Transaction Violation page briefly blinks for the first opening.

What is the root cause of that problem?

On DebugTransactionViolations, we have selectedTab equals violations and selectedTabResult is loaded:

When open the created violation, the screen moves to DebugTransactionViolationPage, creating a new OnyxTabNavigator. When this happens, selectedTabResult, from loaded, becomes loading for a brief moment before turning to loaded again:

This change of value causes OnyxTabNavigator to return the page content, then return null, finally return the page content again:

App/src/libs/Navigation/OnyxTabNavigator.tsx

Lines 106 to 108 in 124a444

	if (isLoadingOnyxValue(selectedTabResult)) {
	return null;
	}

We fixed a similar bug before in #50098, but we didn't consider this case when OnyxTabNavigator screens are changed to new one.

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

Add additional condition to return early when selectedTab is not in routeNames:

App/src/libs/Navigation/OnyxTabNavigator.tsx

Lines 127 to 129 in 124a444

	if (selectedTab === newSelectedTab) {
	return;
	}

if (selectedTab === newSelectedTab || (selectedTab && !routeNames.includes(selectedTab))) {
     return;
}

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

What alternative solutions did you explore? (Optional)

NA

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.

[bernhardoj]

Proposal

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

The violation debug page blink briefly.

What is the root cause of that problem?

This issue is similar to #50098. For all the debug pages, we use the same Tab ID, "DebugTab". When we open the violation page, the selected tab data is loaded from the previous tab data and because the last selected tab data is different with the current tab, we set the new selected tab data.

This issue happens with report action debug page too.

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

I think @daledah proposal works fine and will fix for all pages, but I just want to provide an alternative. The alternative is to have a unique tab ID for each page. We currently have the same id in:

1. DebugReportPage
2. DebugReportActionPage
3. DebugTransactionPage
4. DebugTransactionViolationPage

The downside (?) of this is that, since each page has its own unique ID, if the tab onyx data is not loaded into memory yet, it will render null for a moment. Currently, we won't see it because the data is shared between all pages, but we see the blink.

[melvin-bot]

@twisterdotcom Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[melvin-bot]

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