Emoji is taking 5-6 seconds to render on medium to low-budget mobile devices

[sidAtHoumm]

Hi,

We have an application using Ionic 4 with Capacitor 2. We have a chat application that utlizes the ngs-emoji-picket (version 0.1.6) & twemoji version 13.0.1. When the user clicks on the emoji button to show the entire set, it is taking over 5 seconds for the emoji set to show.

In the appModule.ts, we have imported the Module: NgxEmojiPickerModule.forRoot() and in child module called CommunicationModule.ts, we are importing the NgxEmojiPickerModule.

Issue is that the emoji's are taking over 5 seconds to load.

any help here would be welcome

[ahkohd]

This is due to multiple re-renders, and lots of emojis element nodes that are loaded into the DOM. This is will be an intensive operation for some medium to low-budget mobile devices

Sadly, this plugin at its best for desktop devices

[ahkohd]

The proper way to solve this issue is to lazy load the emojis using intersection observer at the plugin level

A hacky method is to programmatically open and make the emoji picker invisible before the user actually clicks the button to make the picker visible. Also, the close button hides the picker instead of removing it from the DOM

This project is in maintenance mode, I do not plan on releasing a new feature. However, PRs are welcome if anybody wants to implement this feature

[ahkohd]

Alternatively, you can try out https://ahkohd.github.io/ngx-emoj/ its a bit optimized