search

missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.67k stars 835 forks source link

Virtualize the emoji list or only render visible categories #6

Closed EtienneLem closed 2 years ago

nolanlawson commented 5 years ago

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 (https://github.com/tootsuite/mastodon/pull/3191) and it's a decent pseudo-virtual list implementation.

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

harish-aka-shivi commented 3 years ago

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

sayjeyhi commented 3 years ago

any updates? from 2016 to 2021...

sayjeyhi commented 3 years ago

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

yarn add emoji-mart-virtualized

jamesopti commented 3 years ago

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 commented 3 years ago

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