Virtualize the emoji list or only render visible categories

[missive]

Virtualize the emoji list or only render visible categories

[sayjeyhi]

any updates? from 2016 to 2021...

[sayjeyhi]

I fixed this issue on my forked repo: https://github.com/sayjeyhi/emoji-mart and opened this PR: #510, also it is published on: emoji-mart-virtualized so you can use same API with:

yarn add emoji-mart-virtualized

[nolanlawson]

We could use react-virtualized or react-window for this, but a simpler option may be to just use IntersectionObserver to hide the categories (i.e. replace them with an empty <div></div> sized to the right width/height) when the categories are invisible. This is what Mastodon does (mastodon/mastodon#3191) and it's a decent pseudo-virtual list implementation.

For a11y, we would also need to implement the feed role.

[harish-aka-shivi]

Would like to suggest one more virtualization library to consider. It enables us to have dynamically sized items which can be tricky to implement in react-window/react-vitualized

https://github.com/petyosi/react-virtuoso

[jamesopti]

I fixed this issue on my forked repo: https://github.com/sayjeyhi/emoji-mart and opened this PR: #510, also it is published on: emoji-mart-virtualized so you can use same API with:

yarn add emoji-mart-virtualized

Thank you for sharing this! Seems like a no brainer to do this and the performance improvement is instantly noticeable.

[sayjeyhi]

Thanks, @jamesopti, It is completely fixed yeah, but the size issue still there, looking to have some free time to work on it