[HOLD for payment 2024-08-01] [$250] Settings - Left hand menu and RHP do not open instantly when opening from link

[lanitochka17]

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.3-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/settings/preferences/priority-mode
2. Note that the left hand menu and the priority-mode pop-up does not open instantly
3. Click Home
4. Click Account settings
5. Navigate through the settings

Expected Result:

In Step 1, when opening the settings from link, the left-hand menu and RHP will open instantly
In Step 5, the selected tab will be highlighted

Actual Result:

In Step 1, when opening the settings from link, the left-hand menu and RHP do not open instantly
In Step 5, the selected tab is not highlighted

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

Add any screenshot/video evidence

Bug6526859_1719530885004.20240628_064625.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011fca7dda4a362b49
• Upwork Job ID: 1806491850550694979
• Last Price Increase: 2024-07-05
• Automatic offers:
• ishpaul777 | Contributor | 103070943

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

Triggered auto assignment to @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@marcaaron, @MitchExpensify, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MitchExpensify]

Waiting on proposals, Melvin

[kaushiktd]

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

Settings - Left hand menu and RHP do not open instantly when opening from link

What is the root cause of that problem?

The root cause of the issue is that the necessary data for rendering the left-hand menu and right-hand panel (RHP) is not immediately available when navigating directly to a specific URL, causing a delay in rendering and resulting in incomplete UI display. This occurs because the components try to render before the data is fully loaded, leading to a delay in the UI being displayed and the selected tab not being highlighted.

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

To resolve this issue, ensure that the component explicitly handles the loading state and waits for the necessary data before rendering the main content. Here’s how you can do it:

• Add a Loading State:

  • Use a state variable to track whether the component is still loading.
  • Use a useEffect hook to update this state once all required data has been fetched.

• Conditional Rendering:

• • Render a loading indicator while waiting for the data.
  • Render the main content only after all necessary data is available.

 const [isLoading, setIsLoading] = useState(true);
 useEffect(() => {
        if (priorityMode !== undefined && user !== undefined) {
            setIsLoading(false);
        }
    }, [priorityMode, user, preferredTheme]);

    if (isLoading) {
        return (
            <ScreenWrapper>
                <Text>Loading...</Text>
            </ScreenWrapper>
        );
    }

video:- https://drive.google.com/file/d/1OP8jCA7-NAS8CtGB8jPgdhnhJKyKhS9q/view?usp=sharing

[grogou]

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

When opening the settings from link, the left-hand menu and RHP do not open instantly.
The selected tab is not highlighted

What is the root cause of that problem?

The LottieView component in the lottie-react-native package causes an infinite re-render loop when the autoPlay property is set to true. This prevents the Settings page from rendering properly. Due to the continuous re-rendering of the component, the highlighting is also not working. The problem occurs not only on the Preferences page but also on all settings pages that have Lottie animations, such as the Security page.

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

I initially tried to control the Lottie animation manually as recommended in the documentation. However, this approach did not work as expected.

useEffect(() => {
  // Attempt to control the animation programmatically instead of using autoPlay
  // animation.current?.play();
}, []);

To avoid the infinite re-rendering, I used a state variable autoPlayDelay that temporarily holds the autoPlay value. This conditionally renders an empty view which prevents the infinite re-renders.

const [autoPlayDelay, setAutoPlayDelay] = useState(autoPlay);
useEffect(() => {
    const timeout = setTimeout(() => {
        autoPlay && setAutoPlayDelay(false);
    }, 0);
    return () => clearTimeout(timeout);
}, []);

// If the image fails to load or app is in background state, we'll just render an empty view
// using the fallback in case of a Lottie error or appState.isBackground to prevent
// memory leak, see issue: https://github.com/Expensify/App/issues/36645
// 
// autoPlayDelay is using to prevent infinite re-renders when autoPlay is enabled
if (isError || appState.isBackground || autoPlayDelay) {
    return <View style={[aspectRatioStyle, props.style]} />;
}

Visual representation here
https://github.com/Expensify/App/assets/10712881/75cb3cf6-7196-4005-986e-b9cd98c22655

[melvin-bot]

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

[ishpaul777]

We are looking for proposals

[WojtekBoman]

Hey! I’m Wojtek from Software Mansion, an expert agency, and I’d like to work on this issue.

[marcaaron]

Sounds good!

[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.11-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Settings - Left hand menu and RHP do not open instantly when opening from link #45778

If no regressions arise, payment will be issued on 2024-08-01. 🎊

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

• @WojtekBoman does not require payment (Contractor)
• @ishpaul777 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [@ishpaul777] 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:
• [@ishpaul777] A discussion in #expensify-bugs 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:
• [@ishpaul777] Determine if we should create a regression test for this bug.
• [@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@RachCHopkins] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[ishpaul777]

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR: Enable React concurrent mode #42592
• [@ishpaul777] 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: Enable React concurrent mode #42592 (comment)
• [@ishpaul777] A discussion in #expensify-bugs 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: Not required
• [@ishpaul777] Determine if we should create a regression test for this bug. - Not required
• [@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. N/A

[melvin-bot]

@RachCHopkins, @marcaaron, @WojtekBoman, @ishpaul777 Huh... This is 4 days overdue. Who can take care of this?

[marcaaron]

I think we're just waiting on payment for @ishpaul777 at this point.

[RachCHopkins]

Payment approved in UpWork for @ishpaul777 - sorry for the delay Ishpaul!

[RachCHopkins]

Payment Summary:

• Contributor: @ishpaul777 paid $250 via Upwork
• Contributor+: @WojtekBoman does not require payment (Contractor)

[RachCHopkins]

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.