# Emoji picker search performance

**URL:** <https://meta.discourse.org/t/emoji-picker-search-performance/79199>\
**Category:** UX\
**Created:** [January 28, 2018, 12:30pm UTC](https://meta.discourse.org/t/emoji-picker-search-performance/79199 "2018-01-28T12:30:34Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![jorge\_manrubia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jorge_manrubia/32/108192_2.png) [@jorge\_manrubia](https://meta.discourse.org/u/jorge_manrubia)\
**Post date:** [January 28, 2018, 2:37pm UTC](https://meta.discourse.org/t/emoji-picker-search-performance/79199/5 "2018-01-28T14:37:36Z")

</div>

I gave that a try out of curiosity and, indeed, I can reproduce the issue in Chrome with CPU throttling as @david mentioned. For me, replacing this line:

> <https://github.com/jorgemanrubia/discourse/blob/5a715b7d55f443e9783e34609f0a39c2a0de86fb/app/assets/javascripts/discourse/components/emoji-picker.js.es6#L220>

With:

```javascript
this.$list.css('visibility', 'hidden');

```

That fixed the problem for me. I know that `visibility: hidden` is more performant than `display: none` because it won’t cause a reflow, but no idea about why that is having such impact here (maybe [this old chrome bug is still around?](https://bugs.chromium.org/p/chromium/issues/detail?id=71305)). Also, I don’t know if the `visibility: hidden` will introduce other unwanted side effects, but seems to work fine.

It was not a JQuery’s `hide()` thing. `this.$list.css('display', 'none')` was as slow as `this.$list.hide()`.

---

_[View the full topic](https://meta.discourse.org/t/emoji-picker-search-performance/79199)._
