app
app copied to clipboard
Use "virtual scrolling" in Emoji picker
The emoji picker in the "Project Customizer" component is used to select which Emoji a user wants to use as the icon for their project. It's accessible both in the Project Claim flow and by clicking "Edit" on an already-claimed project.
Currently, this component renders many many emojis all into a large scrollable div. Given the large amount of DOM nodes this generates, browser performance noticeably drops when the picker is loaded, especially on low-power devices.
We should use a "virtual scrolling" solution, perhaps provided by a third-party library, to make sure that only emojis currently in view are rendered within the picker, and as the user scrolls, they are seamlessly added and removed.
- Only emojis (and their container nodes) currently in view within the picker should be rendered at any given moment (with some buffer acceptable)
- As the user scrolls, the appending and deletion of DOM nodes should be (mostly) invisible
- Performance should be greatly enhanced.