Don't re-sort the recently used while user is looking at them

[buckett]

The recently used emoji is nice, but having it re-sort the most recently used as the user clicks on them can make it confusing to the user which emoji they are clicking on.

[ealush]

Hey @buckett, I understand the notion, but this one's pretty tricky. The truth is that we're not re-sorting, but really - what's more likely happening is that you have a state somewhere being updated above the picker, which causes the tree to rerender. This triggers the re-initiation of the picker, which then pulls the recently used from local storage, then you get to see this lovely re-sort. I'm wondering, what experience would you expect? Would you expect the recently used to not get updated until the picker gets closed and reopened completely, or maybe, a slight delay between clicking and re-order?

[buckett]

@ealush What I was trying to support was double selecting the emoji to insert it (tap once to select, tap again to insert (instead of the user having to switch to a second button). This works well we the normal list of emoji but on the recent list it resorts it. Here's a screengrab from https://stackblitz.com/edit/emoji-picker-react?file=index.js of the behaviour that is problematic for this.

Yeah, I was wondering if the recent list was only read when the component was mounted, it could still be persisted every time, the user clicks. I think it's nice to add to the recent list when the user clicks on an emoji not in the recent (and inserting it at the start seems sensible).

https://user-images.githubusercontent.com/5921/181908200-4d011db6-6d53-4830-9397-0fa2f4f5fc14.mov

[ealush]

@buckett sorry for responding late.

Yes, I completely see where you're coming from. I do not think, however that clicking on an emoji in the recently used list should be ignored within the list, because it is an emoji that's been used recetly.

The one tradeoff worth considering is reading the recently viewed emojis ONCE on window load, so the visible recent emojis would only change on page reload.

[ealush]

@buckett I recently started working on v4 of the picker, and I can say that it is close to being ready, with only a few minor tweaks.

One of the things it does, is also debounce the updating of the recently used emojis list, it awaits 500ms before actually re-sorting the list.

You can try it with: [email protected].

Let me know if that helps in any way.

[ealush]

Implemented in v4 by deferring the reorder.