Takes time to render emojis upon mounting picker

[jm-david]

Are you referring to the initial render time of the whole component, or the time it takes to load the emojis themselves?

[origo27]

Hello, yes on initial render time of the whole component, and sometimes the emojis are delayed after the whole component has rendered.

Also some of the emojis don't display on the picker.

and also there are some emojis does not display the correct emoji.native it shows a square box.

[jm-david]

Yeah there's definitely a noticeable delay while the component renders initially, and unfortunately I don't have time to refactor things at the moment, but feel free to jump into the code if you're keen! Otherwise I'd recommend using v-show versus v-if. Re: some of the emojis not displaying - that's definitely a bug and I'll try get that fixed asap. It shouldn't be rendering emojis which aren't supported by the selected emoji set. The square box seems to imply that whichever platform you're using doesn't have a native emoji for what you've selected. I'm not aware of any way to detect native support for individual characters, so your best bet may be to use one of the other emoji sets instead.

[jm-david]

New version (2.6.1) fixes the missing emojis

[origo27]

awesome, thanks for the fix! :D

[jm-david]

@origo27 just making you aware that 2.6.1 didn't publish properly for some reason, and there may have been a bug or two as well 😅 would recommend installing 2.6.3 when you can 👍

[origo27]

Hi @jm-david i've updated to 2.6.3 anyways I have an issue with country flags after installing 2.6.1, it does not display the emoji.native but rather their Country Postal Abbreviations on windows platform browser. but it's working fine with mac platform. picker set= emojione

[jm-david]

Does windows have a native emoji for that country? I don't have access to a windows machine to test, but if it works on a mac I suspect that it may not be available on windows.

[origo27]

not sure though but before I reported the missing emojis I was able to test country flags in windows and it displays the native emoji.

[jm-david]

Hmm, I'm not sure why they wouldn't be rendering then... 🤔 The code to generate the native unicode for the emoji comes from the main react package so it's not something I'm able to modify directly. Are there any other emojis you've noticed that aren't working? If you've got the time I'd recommend creating a basic react project and testing with the main react library to see if you get the same result there.

[ReneS1991]

I got the same problem as the initial post described. Due to circumstances I have to use 'native' to load the emojis in the picker. However, I'm using the picker in combination with a toolbar, therefore I'm only showing it (with v-show) the moment the toolbar-icon is clicked. This requires +- 5 seconds to load the picker the first time you open it on a page. Every moment after that opens it within half a second.

I suspect it is because loading the full list of emojis slows the v-show drastically. Is there a way to load the emojis after the picker is visible? (And preferably from top to bottom from the list)

I did a hacky fix for now which 'shows' the picker on page load for a few seconds, but hides it with setting visibility to 'none'. This way the list is being 'loaded' anyways and when the toolbar-icon is clicked it immediately opens the list (okay, 'immediately', it still requires a full second)

[yarosdev]

Pls add an inited event in the mounted hook for showing some loader while it renders. Or smth like that)

[origo27]

is there a way where the return emoji object returns the image of the selected emoji set instead of only the native. same as the custom emoji's imageUrl .

[ReneS1991]

@jm-david Any news/thoughts on this? Even though I did the 'hacky' fix, it is a bit error-prone so it would be awesome if there could come a solution for this.

In my opinion the best would be if the emojis get loaded after the rest of the 'box' is loaded. And to top that off, events like startEmojisLoading and finishedEmojisLoading (just scribbling some names here to get the picture clear) would be awesome because that would allow showing a loader until the Emojis are ready.

[RichPC]

I was noticing pages containing the picker component were taking about half a second to render even with the sprite sheet already cached. I have the picker hidden by default and only shown when a user clicks a button to open the picker, so my main concern was the delayed rendering of the entire page.

I've added v-if="readyToInitPicker" to the picker, with that set to false by default, I then fire a setTimeout in the pages mounted hook, and readyToInitPicker is set to true 1 second after the page has mounted. I still have v-show on the picker as well for my button to show/hide the picker without having to reinitialize the component every time.

My page now renders instantly again.

[drj-io]

Much faster after cloning and building PR#42 into my project. Thanks @sololance!

[sololance]

Hi guys!

I have made some changes to improve overall performance.

Help with tests are welcome #43

I took some time to find out the reason why it was slow 👍

Thanks!