REFACTOR: rewrite the emoji-picker (PR #10464)

The emoji-picker is a specific piece of code as it has very strong performance requirements which are almost not found anywhere else in the app, as a result it was using various hacks to make it work decently even on old browsers.

Following our drop of Internet Explorer, and various new features in Ember and recent browsers we can now take advantage of this to reduce the amount of code needed, this rewrite most importantly does the following:

  • use loading=“lazy” preventing the full list of emojis to be loaded on opening
  • uses InterserctionObserver to find the active section
  • limits the use of native event listentes only for hover/click emojis (for performance reason we track click on the whole emoji area and delegate events), everything else is using ember events
  • uses popper to position the emoji picker
  • no jquery code

GitHub

Mobile:

Desktop:

Note, I’m in the process of rewriting the tests, but this is already reviewable.

This pull request introduces 2 alerts when merging 1878a1ce8a9e57157ee8c085cd8769b3c6241da5 into d0faee3bd882a36088c215eebfba709b1e29c703 - view on LGTM.com

new alerts:

  • 2 for Comparison between inconvertible types

wow - how did that ever work? :confused:

We should probably move this into an import.

super trivial but the indentation is off here

The title of this pull request changed from “REFACTOR: rewrite the emoj-picker” to "REFACTOR: rewrite the emoji-picker