[HOLD for payment 2025-02-04] [$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
• Automatic offers:
• linhvovan29546 | Contributor | 105726162

Issue Owner

Current Issue Owner: @bfitzexpensify

[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-d]

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

[rayane-d]

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-d]

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-d]

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? 💸

[melvin-bot]

📣 @linhvovan29546 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[linhvovan29546]

I'll create the PR tomorrow.

[linhvovan29546]

PR is ready for review! #55442

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[linhvovan29546]

I’m able to reliably reproduce this issue on mWeb Chrome using a physical Android device, even without a CPU slowdown

@rayane-djouah Since you can reproduce this on mWeb Chrome, I believe you might also be able to reproduce this issue: #53208, as the C+ cannot reproduce it

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: in debug menu toggle action delay #55442

If no regressions arise, payment will be issued on 2025-02-04. 🎊

For reference, here are some details about the assignees on this issue:

• @rayane-djouah requires payment through NewDot Manual Requests
• @linhvovan29546 requires payment automatic offer (Contributor)

[melvin-bot]

@rayane-djouah @bfitzexpensify @rayane-djouah The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[rayane-d]

BugZero Checklist:

• Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/40650/files#r1939526071

• If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [@bfitzexpensify] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

#### Test:

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

Do we agree 👍 or 👎

[melvin-bot]

📣 @rayane-d! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[rayane-d]

Requested in NewDot

[bfitzexpensify]

Payment summary:

$250 for @linhvovan29546 - paid via Upwork
$250 for @rayane-d - to be paid via ND request

[garrettmknight]

$250 approved for @rayane-d