[Due for payment 2025-02-18] [$250] Adding users to group has a noticeable lag for high-traffic accounts

[blimpich]

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.84-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+110106kh@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Create a high-traffic account
2. Launch ND or hybrid app
3. Open FAB > Start chat
4. Scroll down the list
5. Tap Add to group on any user
6. Scroll down and tap Add to group again
7. Scroll down and tap Add to group again

Expected Result:

• When app scrolls up after tapping Add to group, the contact will be instantly marked with a checkmark

Actual Result:

• When app scrolls up after tapping Add to group, app takes some seconds before the contact is instantly marked with a checkmark (on Expensifail accounts)

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6712076_1736627825406.ScreenRecording_01-12-2025_04-31-44_1.1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @OfstadC

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021885044308495106120
• Upwork Job ID: 1885044308495106120
• Last Price Increase: 2025-01-30

[melvin-bot]

Current assignee @OfstadC is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Current assignee @blimpich is eligible for the AutoAssignerNewDotQuality assigner, not assigning anyone new.

[QichenZhu]

This seems to share the same root cause I mentioned in another proposal.

[kavimuru]

Issue reproducible

onyx-state.txt
https://github.com/user-attachments/assets/7c60cc70-fd82-4067-b1d0-440239cb4dcd
https://github.com/user-attachments/assets/640fefa9-57ee-40ec-a4ac-656647cf2239

[melvin-bot]

@OfstadC, @blimpich Eep! 4 days overdue now. Issues have feelings too...

[OlimpiaZurek]

Hi! I'm Olimpia from Callstack and I'd like to work on this issue.

[OlimpiaZurek]

Here is my update and first findings:

This issue is mainly due to the heavy calculations in getValidOption:

App/src/pages/NewChatPage.tsx

Line 63 in fe24cb3

const filteredOptions = getValidOptions(

These functions process large sets of reports with complex conditions, which can block the JS thread. I started investigating how we can improve their performance to address the lag.

[OlimpiaZurek]

I found that the main bottleneck causing the lag is the filterAndOrderOptions method.

Here's P/S:

Background

When the app scrolls up after tapping "Add to group", there’s a noticeable delay before the contact gets marked with a checkmark..

Problem

The filterAndOrderOptions function is responsible for displaying options in the component. In some cases, the backend returns duplicate entries in the personalDetails list, causing redundant contacts to be displayed. The following line of code is used to filter out the duplicate personalDetails entries:

orderedOptions.personalDetails = orderedOptions.personalDetails.filter((detail, index, array) =>
    array.findIndex((i) => i.login === detail.login) === index
);

The .findIndex() function is called inside the .filter() method, meaning for each element in personalDetails, findIndex() loops through the entire array to find the first occurrence of that element. This results in inefficient performance, especially with large numbers of contacts, causing the function to slow down and the UI to freeze.

Solution:

Replace .findIndex() with a new Set to filter duplicates. This allows for instant lookups and eliminates redundant checks, making the filtering process significantly faster. As a result, contacts are marked with a checkmark instantly when added, ensuring a smooth and responsive UI.

Before the optimization, the execution time was 6.23s. After the change, the execution time reduces to 16.88 ms (tested with provided onyx state).

Before:

before.mp4

After:

after1.mp4

Draft PR: #56082

[melvin-bot]

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

[melvin-bot]

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

[blimpich]

Added the external tag to get a C+ on this for reviewing the PR. Hi @allgandalf 👋!

@OlimpiaZurek fantastic! That seems like a great and straightforward solution. I love it when swapping out a data structure is the solution 🚀

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

• Perf: improve performance of filterAndOrderOptions #56082

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

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

• @OlimpiaZurek does not require payment (Contractor)
• @allgandalf requires payment (Needs manual offer from BZ)

[melvin-bot]

@allgandalf @OfstadC @allgandalf 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]

[OfstadC]

@allgandalf please complete BZ checklist before payment date. Thank you!

[allgandalf]

Will complete it today, thanks!

[OfstadC]

Thank you!

[melvin-bot]

@OfstadC @blimpich @OlimpiaZurek @allgandalf this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @OlimpiaZurek is from an agency-contributor and not due payment
• ROLE: @allgandalf paid $250 via Upwork (LINK)

BugZero Checklist (@OfstadC)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1885044308495106120/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[OfstadC]

@allgandalf please complete BZ checklist by EOD so we can issue payment 😃 Thanks!

[allgandalf]

BugZero Checklist:

• [Contributor] 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: Not a bug, we improved the performance

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

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

• [Contributor] 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/51954/files#r1961033057

• [Contributor] 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

• [Contributor] 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.

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

  Link to issue: https://github.com/Expensify/Expensify/issues/472654

Regression Test Proposal

Precondition:

• N/A

Test:

1. Log in to the app using an HT account. > Open the FAB and select Start Chat.
2. Scroll down the list of contacts.
3. Tap "Add to Group" and observe the UI response.

Verify that the selected contact is marked instantly.

Do we agree 👍 or 👎

[OfstadC]

Payment Summary Updated