4
Emoji Picker Performance and UX
(hexbear.net)
submitted
1 month ago* (last edited 1 month ago)
by
LeninWeave@hexbear.net
to
c/technology@hexbear.net
cross-posted from: https://hexbear.net/post/6598439
Cross-posting my own post from /c/feedback to /c/technology, because it seems like the feedback comm is bugged.
There has been discussion recently about the performance of the emoji picker. I wanted to make a follow-up thread.
To establish context, there are two emoji pickers.
- The one that appears when you type ":" followed by a string to filter the results. I will refer to this as the "inline" picker.
- The one that appears when you click the "Emoji" button above the text entry area for a comment/post. I will refer to this as the "popup" picker.
Many people have had performance issues with these pickers. Some have proposed reducing the number of emoji, which I am personally strictly opposed to. I think the emoji are a crucial part of this website, including the very rarely used ones. It seems much better to first pursue technical solutions to this problem.
- Lazy loading of the images, meaning that only the images matching your search string will be loaded rather than all the images at once.
- @makotech222@hexbear.net implemented this, which works well. However, it seems to work only for the inline picker and not the popup.
- Could this be implemented for the popup? I assume the popup uses a 3rd party library, which may complicate this.
- This should theoretically allow a functionally unlimited number of emoji.
- Some of the images (as @WhyEssEff@hexbear.net pointed out) are oversized.
- Perhaps these could be bulk resized. This was discussed in the previous thread.
- I would like to also propose very low resolution versions (32x32 or similar) be created to act as thumbnails for the popup picker, if possible. This may not be worth the effort, or do more harm than good.
I have also noticed other problems with the pickers.
- The popup picker and inline picker seem to use different filtering algorithms, which do not provide the same list of emoji for the same input. I personally find the popup picker to work better.
- The popup picker seems to insert emoji at the end of the comment/post text with a space before and after.
- This means having to remove one or more spaces when combining emoji.
- This also means having to cut and paste the inserted text if the desired location was not the end of the post/comment.
- I propose that it would be better for the emoji text to be inserted at the location of the typing cursor, without spaces before and after. This is only for the popup picker, it makes sense for the inline picker to insert a space after because it functions as autocomplete.
I don't think that they are, but there are outlier emoji (as WhyEssEff pointed out, older ones) which are larger than normal and should be resized for consistency even if the benefit to average performance is not very large.
I think that the core issue is how they are loaded. With lazy loading implemented in both pickers, I don't see a reason we could not have a functionally unlimited number of emoji. In the popup picker, I never have more than a few dozen emoji once I have entered my search string - the list doesn't even overflow the size of the popup.