search

jm-david / emoji-mart-vue

One component to pick them all 👊🏼
https://jm-david.github.io/emoji-mart-vue
BSD 3-Clause "New" or "Revised" License
603 stars 82 forks source link

Picker component slowing down other Vue components #29

Closed thoms17 closed 5 years ago

thoms17 commented 6 years ago

Hello,

First, congratulations for your work, it's really nice !

I'm using your emoji picker in a messaging project, and i'm having really low performances doing some trivial things.

For exemple, I'm using a textarea to type message to send with a v-model inside and i text entry is really slow. Otherwise, i have to click on a buddy to open the conversation i have with him, and in the same way, it takes like 2s to open the conversation, and in the performance monitor, i'm reaching 100% of CPU usage meanwhile. All this lags are happening while picker component is not opened or used. It's available if I click on a specific button but hidden if I don't.

Commenting the picker component solved all of my problems, no more latency or anything else, my textarea is fluid, same as conversations opening. It would be a shame not to use it because I really appreciate how it works. I also find some way to avoid the latency using JQuery rather than vue directives but it's also a shame using JQuery while it's that simple with Vue. Even using an emty picker with no props is causing latency.

So I was wondering if there is not any performance issue in this component.

Thanks

MehrdadKhanzadeh commented 6 years ago

Hey there! Same here! I was about to open a new issue for this, then I saw this! I have the exact same problem! With emoji picker, it gets really slow and I don't know what to do! It's almost unusable this way!

s4tori commented 6 years ago

Hi,

I'm experiencing the same issue... @thoms17 and @MehrdadKhanzadeh, can you try with emoji-mart-vue v2.5.3? It's seems that performance problems have appeared since version 2.6.1 only.

A lot of commits have been made between version 2.5.3 and 2.6.1, and I don't have a lot of time to investigate. With version 2.5.3, emoji-mart-vue works very well.

MehrdadKhanzadeh commented 6 years ago

@s4tori Hi! Thanks! It worked for me!

Serubin commented 5 years ago

I'm having a similar issue. This version of emoji-mart fires some very costly event sequences. This was noticed during typing events on an unrelated input field. For some reason the emoji-mart plugin is creating and removing elements from the DOM along with doing some other costly and seemingly unnecessarily calculations.

The images below are the performance profile of original vue-emoji-mart followed by the emoji-mart-vue implementation.

screen shot 2018-09-21 at 9 54 24 pm screen shot 2018-09-21 at 9 55 42 pm
markojak commented 5 years ago

I'm experiencing this issue as well. Have tried to use Nimble-Picker and load only the messenger.json to see if this resolves it. Will try and revert to 2.5.x to see if this fixes the issue.

Currently using "emoji-mart-vue": "^2.6.4",

pmdarrow commented 5 years ago

Still slow for me even after downgrading to 2.5.x. I will try to find some time to dig into what's causing the delays...

zealotrahl commented 4 years ago

2.6.6, still slow, call it with VueSax sidebar, and it freezes sidebar animation.

Serubin commented 4 years ago

We've started using this fork https://github.com/serebrov/emoji-mart-vue in production.

It's significantly faster and has been more consistent than this fork.