Skip to content

Improved award emoji picker [RUN ALL RSPEC] [RUN AS-IF-FOSS]

Phil Hughes requested to merge ph/emojiPicker into master

What does this MR do?

Improves the award emoji picker UX and performance.

The UX has improved by grouping each category into 'tabs'. However they aren't true tabs in the way they would change the content, they are just anchors that get made active when scrolling. When clicked it will scroll to the correct category.

The performance has been improved in a variety of ways:

  1. Its now a Vue component instead of just dumping a load of HTML into the DOM. Whilst this change doesn't directly improve performance, it allows us to do more.
  2. Virtual scrolling! With virtual scrolling we will only ever generate the DOM nodes for at max 3 categories which saves A LOT on DOM nodes.
  3. Intersection observer to render only the emojis that are visible + a buffer. This is a huge bonus. We can take a massive list of emojis and reduce the count down a much less memory intensive number.

Note

This is behind the improved_emoji_picker feature flag and is only supported on individual notes for now, not the whole issuable.

Screenshots (strongly suggested)

image

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Marcel van Remmerden

Merge request reports