[HOLD for payment 2024-04-15] [$500] Group Chat - Selected contacts appear on the confirmation page with a delay

[izarutskaya]

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: v1.4.58-0
Reproducible in staging?: Y
Reproducible in production?: N, new feature
Email or phone of affected tester (no customers): applausetester+ihchat4_2903_112@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Open the app
2. Login with any account
3. Go to FAB -> Start chat -> Select several contacts -> Next

Expected Result:

Selected contacts appear on the confirmation page without delay

Actual Result:

Selected contacts appear on the confirmation page with a delay

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

Bug6431592_1711719920756.video_2024-03-29_12-17-06.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019cff08ce4851387c
• Upwork Job ID: 1773732051935440896
• Last Price Increase: 2024-03-29
• Automatic offers:
• Ollyws | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 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.

[izarutskaya]

@MitchExpensify 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.

[izarutskaya]

We think this issue might be related to the #vip-bills.

[tgolen]

I agree this should be external and I'm going to remove the deploy blocker label since there is no blocked functionality.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

The selected users in group creation confirmation page is shown with delay.

What is the root cause of that problem?

The issue lies in the selection list component.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 574 in 25b85a9

style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0}

A 0 opacity style will be applied if either maxToRenderPerBatch is not available yet or isInitialSectionListRender is true. maxToRenderPerBatch is not available initially only if we enable shouldUseDynamicMaxToRenderPerBatch which we don't use in group chat confirmation page, so the problem is with the isInitialSectionListRender.

isInitialSectionListRender is initially true,

App/src/components/SelectionList/BaseSelectionList.tsx

Line 85 in 25b85a9

const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true);

and will be updated to false when onLayout is triggered.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 354 in 25b85a9

setIsInitialSectionListRender(false);

That's why we see a blank list for a brief moment initially, on all list.

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

isInitialSectionListRender is added to fix #29780 where the currency list shows some blank space at the top of the list when it auto scrolls to the bottom of the list. So, they wait until on layout is called before showing the list.

There is also a similar issue but on the country selector page and they fix it by introducing the dynamic maxToRenderPerBatch which also hides the list initially until the maxToRenderPerBatch is calculated from onLayout calls. So, we have 2 solutions applied to solve the same issue. One of the difference with dynamic maxToRenderPerBatch is we enable it by props, so not all list is affected.

So, I'm proposing to remove the isInitialSectionListRender and apply dynamic maxToRenderPerBatch to currency list page (and possibly on other page too if we want to do some audit)

Optional:
Currently, we set the group participant when pressing the Next button. I don't see any noticeable improvement, but just in case, we can set the participant on each user we select.

[Ollyws]

@bernhardoj's proposal LGTM. But I can't reproduce #29780 with isInitialSectionListRender set to false so maybe we could just get rid of it? Either way I think there's enough to be going on with.
🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @tgolen is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @Ollyws 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @Ollyws

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

• FIx group chat confirmation list is displayed with delay #39364

If no regressions arise, payment will be issued on 2024-04-15. 🎊

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

• @Ollyws requires payment automatic offer (Reviewer)
• @bernhardoj 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:

• [@Ollyws] The PR that introduced the bug has been identified. Link to the PR:
• [@Ollyws] 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:
• [@Ollyws] 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:
• [@Ollyws] Determine if we should create a regression test for this bug.
• [@Ollyws] 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.
• [@MitchExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[MitchExpensify]

Payment summary:

• C+ @Ollyws $500 Upwork
• C @bernhardoj $500 Upwork

https://www.upwork.com/jobs/~019cff08ce4851387c

[Ollyws]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR:

#33833

• 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/33833/files#r1565381465

• 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:

N/A

• Determine if we should create a regression test for this bug.

Yes.

• 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.

Regression Test Proposal

1. Press FAB and select Start chat
2. Add multiple people to group selection
3. Press Next
4. Verify the list is displayed without delay on the confirmation page

Do we agree 👍 or 👎

[MitchExpensify]

Paid and contract ended! Thanks @Ollyws @bernhardoj

https://github.com/Expensify/Expensify/issues/387838