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 contributors@expensify.com 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

[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. 🤔