[$250] Web- User avatar & animation do not load after switching from Inbox to Settings with animation

[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: v9.0.18-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp #46885
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account settings.
3. Go to any page with animation in the header (Preferences/Security/Troubleshoot/About/Save the world).
4. Go to Inbox.
5. Switch back to Account settings.

Expected Result:

User avatar and the animation will load after switching from Inbox to Settings with animation.

Actual Result:

User avatar and the animation do not load after switching from Inbox to Settings with animation.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6565130_1723080112279.20240808_091738.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01721123276553a8a9
• Upwork Job ID: 1821551089457405095
• Last Price Increase: 2024-08-24
• Automatic offers:
• dominictb | Contributor | 103887884

Issue Owner

Current Issue Owner: @ntdiary

[melvin-bot]

Triggered auto assignment to @puneetlath (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 #vip-vsb

[IuliiaHerets]

@puneetlath 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

[melvin-bot]

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

[melvin-bot]

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

[codewaseem]

It seems that this bug is caused by unnecessary state updates, leading to a much more complicated issue than it initially appears. There's an infinite re-rendering loop occurring when navigating from Settings -> Inbox -> Settings.

The top-level component is continuously re-rendering, which could be the underlying cause of performance issues and the heating problem noted in issue #36645.

cI've been unable to pinpoint the exact cause of these unnecessary re-renders, but I suspect it mainly stems from react-native-onyx/withOnyx().
See : #47041 (comment)