Emoji picker freezes whenever called, custom emoji button doesn't work correctly.

[AnasDevO]

Summary

Emoji picker freezes whenever called, custom emoji button doesn't work correctly.

Environment Information

• Device Name: Samsung S21 (reproducible in any emulated android phone)
• OS Version: Android 12 (also reproducible in android 14)
• Mattermost App Version: 2.21.0 (build 561)
• Mattermost Server Version: 9.11.1 (build 10419911144)

Steps to reproduce

Just go to custom status and press emoji picker. then, click on custom emoji tab.

Expected behavior

Emoji picker appears, and when custom emoji tab is pressed, it will scroll down to custom emoji section.

Observed behavior (that appears unintentional)

Emoji picker will freeze when you press on custom emoji tab, and when interacting further with the emoji picker, it will begin to fetch emojis very slowly, refreshing the list every second. The Fetch is also not cached (assumption), and will be re-fetched every time emoji picker is called. Also, there's is a chance the app not close the emoji picker even when put down, and will keep only the emoji picker reactive (couldn't video that behavior.)

output1.mp4

Possible fixes

I do not have any idea how this can be fixed, but i do suggest that the emoji picker async-fetch emojis during the app start, and caches the component instead of refreshing it every time (even when no new emoji has been added!)..

[muhammadashfaq]

@amyblais I want to take on this issue. Please create a ticket and assign to me.

[amyblais]

Ticket: https://mattermost.atlassian.net/browse/MM-60981