[$500] Chat - Start chat opens not smoothly

[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: 1.4.23-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: Applause - Internal Team Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in
3. Click on + (FAB) in LHN
4. Click on Start chat

Expected Result:

Start chat opens smoothly

Actual Result:

Start chat opens not smoothly

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] Windows: Chrome
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/f313a037-4f63-4e77-95eb-03553dc51c33

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017aeb95424fe5c1b2
• Upwork Job ID: 1744721747500904448
• Last Price Increase: 2024-01-09

[melvin-bot[bot]]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[trjExpensify]

Hm, I'm on staging mac chrome and can't repro this - it's fast and smooth for me. @lanitochka17, confirming this is reproducible on both staging and production? Is it Windows only?

[samilabud]

Proposal

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

Chat - Start chat opens not smoothly

What is the root cause of that problem?

Every time we open the start chat navigation modal we are calling two times the getFilteredOptions from OptionsListUtils in: https://github.com/Expensify/App/blob/e9f27ab4218ec21ac6ecd755d4026b85c50f67d6/src/pages/NewChatPage.js#L185 This makes the animation of the navigation modal make this strange behavior, more because when use set the personal details using setFilteredPersonalDetails(newChatPersonalDetails).

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

We should use useMemo to store the value of that function and use it every time the start chat navigation modal is called/toggle in these two lines: https://github.com/Expensify/App/blob/e9f27ab4218ec21ac6ecd755d4026b85c50f67d6/src/pages/NewChatPage.js#L133 https://github.com/Expensify/App/blob/e9f27ab4218ec21ac6ecd755d4026b85c50f67d6/src/pages/NewChatPage.js#L185

The useMemo code could be something like:

const filteredOptions = useMemo(
        () =>
            OptionsListUtils.getFilteredOptions(
                reports,
                personalDetails,
                betas,
                searchTerm,
                selectedOptions,
                isGroupChat ? excludedGroupEmails : [],
                false,
                true,
                false,
                {},
                [],
                false,
                {},
                [],
                true,
                true,
            ),
        [searchTerm],
    );

Result: Before changes:

https://github.com/Expensify/App/assets/5216036/eea98119-f9c2-484d-9dd3-cc281bb016dc

With rendering painting enabled (notice the component is rendered two times while open):

https://github.com/Expensify/App/assets/5216036/cb15d4a9-82cb-44f3-a504-b619e973cb69

After changes:

https://github.com/Expensify/App/assets/5216036/b310d10d-cfce-4415-a680-1475464e9078

With rendering painting enabled (notice the component open smoothly):

https://github.com/Expensify/App/assets/5216036/4965ef56-e91b-4ea0-b6cf-326d85299d82

[melvin-bot[bot]]

📣 @MelnykDmitro! 📣 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>

[MelnykDmitro]

Contributor details Your Expensify account email: melnyk.dmitro@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/dmytrom100

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[MelnykDmitro]

@lanitochka17 I've noticed this issue occurs only when the Developer Tools panel in Chrome is open. In my case, if I close it, the chat starts smoothly. Once it's opened, it consumes a lot of resources to render the DOM efficiently.

Proposal

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

Chat - Start chat opens not smoothly

What is the root cause of that problem?

I have investigated the way animation is provided for the modal and have found it already uses the most efficient way to animate using transform style property. My presumption is that issue affected by opened dev panel and insufficient machine resources to render it smoothly.

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

We can use will-change property together with transform to hint to the browser that an element will be animated, which can optimize rendering.

What alternative solutions did you explore? (Optional)

1. Use smoother animations.
2. Velocity.js or GreenSock Animation Platform (GSAP) instead of regular animations provided by React Navigation.

[jjcoffee]

I imagine this is related/a dupe of https://github.com/Expensify/App/issues/33459.

[MelnykDmitro]

I imagine this is related/a dupe of #33459.

Might be caused by the same problem.

[jjcoffee]

@trjExpensify Let's close this in favour of https://github.com/Expensify/App/issues/33459.

[trjExpensify]

Works for me!