app icon indicating copy to clipboard operation
app copied to clipboard

Use "virtual scrolling" in Emoji picker

Open efstajas opened this issue 1 year ago • 0 comments

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.

  1. Only emojis (and their container nodes) currently in view within the picker should be rendered at any given moment (with some buffer acceptable)
  2. As the user scrolls, the appending and deletion of DOM nodes should be (mostly) invisible
  3. Performance should be greatly enhanced.

efstajas avatar Feb 09 '24 09:02 efstajas