[$500] Emoji picker - There is a noticeable lag with the emoji picker search input animation

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.21-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:
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. Open a conversation
2. Click on the emoji picker in the composer
3. Observe the lag of the "Search" label input animation

Expected Result:

The search input label shouldn't have a noticeable lag.

Actual Result:

There is a noticeable lag as the search input label animates

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

ZeoPoqiVuk.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010a89f9bc9b6b84d8
• Upwork Job ID: 1742577251837038592
• Last Price Increase: 2024-01-30
• Automatic offers:
• abdulrahuman5196 | Reviewer | 28084092
• aimane-chnaif | Contributor | 28084093
• bernhardoj | Contributor | 28088325

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[trjExpensify]

Commented in the linked issue, @aimane-chnaif & @bernhardoj let me know if I need to assign yah!

[aimane-chnaif]

yes, please assign. We can confirm

[melvin-bot]

📣 @abdulrahuman5196 🎉 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]

📣 @aimane-chnaif 🎉 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 📖

[trjExpensify]

Cool, once @bernhardoj comments here I'll co-assign as well.

[bernhardoj]

Umm, I think @aimane-chnaif missed my comment here 😅

It shouldn't be reproducible anymore (at least from my testing).

[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 📖

[trjExpensify]

Assigning you in the meantime to keep track of it!

[trjExpensify]

Perfect, thanks!

[gedu]

Still looking into this, I'm doing some simplification, merging some rerenders, but still seeing some lags

[gedu]

Proposal

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

When opening the Emoji picker dialog, the search emoji input gets focused and the placeholder is animated to a title. That animation is laggy.

What is the root cause of that problem?

When the Emoji picker dialog is open there are 2 animations happening, the disableLabel and the activateLabel at the TextInput component. The first one, it is to animate from title to placeholder, and the second one is from placeholder to title. Because of those 2 animation happening in parallel, the SearchInput looks laggy.

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

In EmojiPickerMenu/index.js, we have to add the forceActiveLabel to the TextInput component.

emojiPicker_chrome.mp4

@trjExpensify

[aimane-chnaif]

@gedu thanks for the proposal. But the root cause is not correct. There's no issue with TextInput itself.
This happens from tons of emojis being loaded at the same time. You can verify it by replacing filteredEmojis with [] here.
And we cannot simply disable label floating animation, which leads to inconsistency.

[ishpaul777]

I still dont find the offending PR, but just curious @aimane-chnaif what do you think of my solution :D

what happens if user manually focus on input before running interactions are complete?

we can have a check for isFocussed to return early in case input is focussed already

[gedu]

@aimane-chnaif
You are right, I though the forceActiveLabel was just for the first frame, when I checked was working like that, but seems that it deactivate completely the placeholder state.

Yeah, I was talking internally about the amount of objects being loaded, it is almost 2k, and asked if all of them should be loaded, and they told me yes. I will check making kind of a fake pagination, will update my proposal soon

[trjExpensify]

Any luck with that update, @gedu?

[gedu]

@trjExpensify Yes, tried the pagination but wasn't good for the Emoji shortcut bar. So digging into the source code, found that it is based on another OSS RecyclerListView, where I found the drawDistance prop can help us, it reduce the amount to render the items. Now the default is 2k, so it renders all the emojis in one cycle, so setting to 300 (after some testing) found it was the most optimal number.

Proposal
Please re-state the problem that we are trying to solve in this issue.
When opening the Emoji picker dialog, the search emoji input gets focused and the placeholder is animated to a title. That animation is laggy.

What is the root cause of that problem?
FlashList tries to render certain amount of components at the end of the cycle, which by default is set to 2k. That is the amount of emojis we load.

What changes do you think we should make in order to solve the problem?
There is a prop to change it drawDistance, setting it to 300 (after some tests it is a good number, 600 starts lagging and show more blank spaces, more of 800 the lag is more visible).

           <FlashList
                    ref={forwardedRef}
                    keyboardShouldPersistTaps="handled"
                    data={data}
                    drawDistance={300}
                    ..... />

emoji_picker_menu.mp4

[gedu]

@trjExpensify Friendly ping, wdyt about the new "proposal"?

[aimane-chnaif]

@gedu this lag doesn't happen on native even without setting drawDistance. Do you know the reason?

I tested drawDistance={300} approach. Tests well on web. But not sure if we should apply to native as well while we're not having issue on those platforms.

[gedu]

@aimane-chnaif could be because for native the default number is 250 and not 2k like web

[gedu]

we can use 250, instead of 300 so all the platforms use the same, or we can create a config file and change the number depending on the Platform

[aimane-chnaif]

Thanks for clarification.
@gedu's proposal looks good to me.
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @Beamanator, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[aimane-chnaif]

we can use 250, instead of 300 so all the platforms use the same, or we can create a config file and change the number depending on the Platform

If 250 is thoroughly tested on all platforms, I agree with it without having platform config.

[Beamanator]

I also like @gedu 's proposal 👍 they're already assigned so please create the PR when ready! 😅

[gedu]

we can use 250, instead of 300 so all the platforms use the same, or we can create a config file and change the number depending on the Platform

If 250 is thoroughly tested on all platforms, I agree with it without having platform config.

Cool, I will create a CONST value for it

[gedu]

@aimane-chnaif @Beamanator PR created: #36486

[trjExpensify]

PR hit staging 15 hours ago.

[aimane-chnaif]

@trjExpensify PR hit production on Mar 6

[trjExpensify]

Ah, the automation didn't run for some reason.

Payment summary as follows:

• $500 to @aimane-chnaif for the C+ review
• @gedu is from CallStack, payment will be handled elsewhere.

Paid you, Aimane. Closing!