[$250] mWeb - Xero - 2FA animation slides in and out slowly

[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.52-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #50790
Issue reported by: Applause Internal Team

Action Performed:

1. Log in with a Gmail account without 2FA
2. Create a workspace
3. Navigate to Workspace settings - More features
4. Enable "Accounting"
5. Navigate to Workspace settings - Accounting
6. Tap on the "Connect" button next to Xero
7. Dismiss the modal

Expected Result:

The animation should be smooth.

Actual Result:

2FA animation slides in and out slowly.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6641963_1729596764193.JKGS8535.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849192343033802575
• Upwork Job ID: 1849192343033802575
• Last Price Increase: 2024-10-30

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 2

[IuliiaHerets]

@adelekennedy FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[zfurtak]

I can take care of it immediately 👍

[zfurtak]

I tested the cases also without the changes made in my PR and here is the comparison:

Firstly, I think the problem is only related to IOS mweb, on Android it looks correct (in my opinion).

Comparison on Android

android-before.mov

android-after.mov

Secondly - IOS mweb, the slow animation is there even without my modified code, it already looked rather rough. For comparison, I checked in debug mode, but I also looked at the app in production and there's not much difference. Below you can see the behaviour before my changes and after.

It is indeed a bug, but not caused by my code, at most it might be more visible because my code adds a sliding out animation that was not there before.

Comparison on IOS

ios-before.mov

ios-after.mov

However, I can address this bug and try to fix the rough animation as it is a part of our issue to improve the UX.

[situchan]

yup, this is not a regression.

Also QA team stated that Reproducible in production?: Y

[melvin-bot]

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

[melvin-bot]

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

[zfurtak]

The rough modal's animation is caused by Lottie animation inside the modal.
Just to compare without the Lottie component inside it behaves like below:

Screen.Recording.2024-10-25.at.11.53.43.mov

The only solution I found is a workaround (however far from perfection): to add prop shouldLoadAfterInteractions to Lottie component so the animation loads after opening modal, but it doesn't solve the problem for sliding down.
See how it looks:

Screen.Recording.2024-10-25.at.13.53.52.mov

[melvin-bot]

@rushatgabhane, @adelekennedy Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[adelekennedy]

@rushatgabhane thoughts on the above?