[$250] Wallet - In debug menu any toggle action applied with a delay

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue was found while executing issue retest #54746

Version Number: v9.0.80-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #54746
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: MacOS Catalina 10.15.7
App Component: Other

Action Performed:

Precondition: user is logged in desktop app.

1. Go to Settings > Wallet
2. Press key combination Cmd+D
3. Turn any toggle (e.g. Force offline)

Expected Result:

Toggle is switched immediately.

Actual Result:

Toggle is not response. User has to close debug menu and go to another tad to see change applied.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876724087999435775
• Upwork Job ID: 1876724087999435775
• Last Price Increase: 2025-01-14

Issue Owner

Current Issue Owner: @rayane-djouah

[melvin-bot]

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

[linhvovan29546]

Edited by proposal-police: This proposal was edited at 2025-01-03 03:07:12 UTC.

Proposal

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

Wallet - Toggle is not response. User has to close debug menu and go to another tad to see change applied.

What is the root cause of that problem?

In the wallet page, we have Lottie Animation here

App/src/pages/settings/Wallet/WalletPage/WalletPage.tsx

Lines 373 to 378 in 1cfcfa4

	<Section
	subtitle={translate('walletPage.addBankAccountToSendAndReceive')}
	title={translate('common.bankAccounts')}
	isCentralPane
	titleStyles={styles.accountSettingsSectionTitle}
	illustration={LottieAnimations.BankVault}

And in debug menu we have Switch component, we handle onToggle callback inside
InteractionManager.runAfterInteractions come from this PR #40650 and it never called because the Lottie Animation in the Wallet page is running loop

Note: This issue only occurs when using the BankVault animation. I tested with other animations, and they worked well.(I'm not sure if the BankVault animation behaves differently from other animations)

App/src/components/Switch.tsx

Lines 45 to 53 in 1cfcfa4

	const handleSwitchPress = () => {
	InteractionManager.runAfterInteractions(() => {
	if (disabled) {
	disabledAction?.();
	return;
	}
	onToggle(!isOn);
	});
	};

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

We can replace InteractionManager.runAfterInteractions to

        setTimeout(() => {
            if (disabled) {
                disabledAction?.();
                return;
            }
            onToggle(!isOn);
        }, 0);

or

        requestAnimationFrame(() => {
            if (disabled) {
                disabledAction?.();
                return;
            }
            onToggle(!isOn);
        });

Alternatively, we can remove InteractionManager.runAfterInteractions.
I've tested the update and can no longer reproduce the issue #40650

POC

Before	After
Screen.Recording.2025-01-03.at.9.42.06.AM.mov	Screen.Recording.2025-01-03.at.9.07.25.AM.mov

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

No, it only UI

What alternative solutions did you explore? (Optional)

We can consider adding a new prop to the Switch component to specify whether InteractionManager.runAfterInteractions should be used

       <Switch
          ...
         shouldRunAfterInteractions={false}
         />

    const handleSwitchPress = () => {
        if (shouldRunAfterInteractions) {
            InteractionManager.runAfterInteractions(() => {
                if (disabled) {
                    disabledAction?.();
                    return;
                }
                onToggle(!isOn);
            });
        } else {
            if (disabled) {
                disabledAction?.();
                return;
            }
            onToggle(!isOn);
        }
    }

We can consider pause Lottie Animation when debug menu is opened here

    const [isTestToolsModalOpen = false] = useOnyx(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN);
    const isRenderedRef = useRef(false)
    const isFocused = useIsFocused();
    const prevIsTestToolsModalOpen = usePrevious(isTestToolsModalOpen);

    useEffect(() => {
        if (!isRenderedRef.current && !isFocused) return;

        if (isTestToolsModalOpen) {
            setHasNavigatedAway(true);
        } else {
            if (prevIsTestToolsModalOpen && animationRef.current) {
                setHasNavigatedAway(false);
                animationRef.current.play();
            }
        }
    }, [isTestToolsModalOpen, prevIsTestToolsModalOpen, isFocused, isRenderedRef.current]);

[CyberAndrii]

This is similar to #53208

[melvin-bot]

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

[linhvovan29546]

This is similar to #53208

The root cause related to the Lottie animation prevents the InteractionManager.runAfterInteractions callback from executing, While that issue is marked as 'Hold for React Native 0.76,' I think it is not related to the RN version. 🤔

[bfitzexpensify]

This isn't a customer flow, but not ideal for debugging.

[melvin-bot]

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

[melvin-bot]

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

[linhvovan29546]

@rayane-djouah is there any update on my proposal?

[rayane-djouah]

@linhvovan29546 are you still able to reproduce the bug on the latest main?

[rayane-djouah]

Screen.Recording.2025-01-13.at.4.15.01.AM.mov

I'm not able to reproduce the bug. @linhvovan29546 is there anything I'm missing?

[linhvovan29546]

@rayane-djouah I can still reproduce this issue on the main branch. Issue here the Lottie animation prevents runAfterInteractions (because the InteractionManager allows long-running work to be scheduled after any interactions/animations have completed). I think this happens on low-performance devices

Screen.Recording.2025-01-13.at.11.55.31.AM.mov

[rayane-djouah]

I think this happens on low-performance devices

I'm able to reproduce with 4x CPU slowdown 👍

Screen.Recording.2025-01-13.at.12.55.24.PM.mov

Note: This issue only occurs when using the BankVault animation. I tested with other animations, and they worked well.(I'm not sure if the BankVault animation behaves differently from other animations)

I'm able to reproduce on all pages that use Lottie animation.

[rayane-djouah]

Since we no longer navigate to the feature page when enabling it on the "More Features" page, the bug described in issue #39443 is no longer reproducible. This means we should be safe to remove InteractionManager.runAfterInteractions as the proposal suggested. However, I believe it is safer to use requestAnimationFrame instead. Please note that our guidelines recommend avoiding setTimeout.

requestAnimationFrame worked well during my testing.

I feel that the alternative solutions proposed are overly engineered and may introduce unnecessary complexity.

@linhvovan29546 I did notice some flickering with the switch button animation on pages that use Lottie animations. Could this be a conflict between Lottie animations and react-native-reanimated animations? Do you have a suggestion to address this issue?

Screen.Recording.2025-01-13.at.1.16.33.PM.mov

[linhvovan29546]

Could this be a conflict between Lottie animations and react-native-reanimated animations?

@rayane-djouah I don't believe this is a conflict issue. Instead, I think it’s related to CPU slowdown. I tested this by pausing the Lottie animation (as it consumes high CPU), and I observed the same flickering issue as you described with high CPU slowdown.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸