ealush
Emojis not loading properly
Since I've updated to version 4.14.2, when i open emojis component I only see an empty box with categories. I have to scroll a bit and only then emojis start loading by categories:
https://pasteboard.co/7XpCYamKlCVk.png
Could this be a bug introduced by the newest patch version that wanted to reduce loading time for emojis?
I'm not experiencing this myself, can you report back your current config and I'll try to reproduce?
- Which props/features you have enabled (copy the code you're using to use the picker )
- browser/os
Also, if there are any console errors I'd love to see them as well.
OS - Windows 11 Pro Browser - Chrome
If I already had some smileys selected before, in previous usages, it loads properly it seems, but when I open incognito or someone from the QA team on the deployed env with this new version, it is empty for the first few categories.
Same happens with enabled lazyLoadEmojis
This is the component:
<EmojiPicker emojiStyle={EmojiStyle.NATIVE} searchDisabled lazyLoadEmojis onEmojiClick={(e) => handleChange(lang.language, e.emoji, true)} previewConfig={{ defaultEmoji: "", defaultCaption: "" }} width="100%" height={emojiVisible ? "300px" : 0} />
When I downgrade to .14.0, no issues, only in .14.2.
Only solution that works (I've discovered it right now while answering and testing) is making the height a fixed value for the emoji picker (for example height="300px"), while making the container dynamic in height and overflow:hidden. Then all works fine and emojis load properly.
Changing the height of emoji picker dynamically seems to create this issue but only with this new version.
Thank you for this clarification.
Will repro on my end and hopefully resolve it quickly. Also, thank you for the hint about the fixed size.
Thank you for responding so quickly, and for developing this very helpful and handy component :)
Also, one more hint, it would be handy if we could hide category labels in some future versions:
I've managed to do it with simple css:
.epr-emoji-category-label { visibility: hidden; height: 1px; //if we set to 0px this component doesn't render emojis that are at bottom correctly }
We have to reduce height since we get empty spaces in the list with only visibility:hidden.
But when we set this height to 0px, it creates some kind of an issue with categories and emojis at bottom, they render only at top part of their container. The more you scroll down, more of the box is empty, while at the end you don't see any emojis. This is also the reason I didn't use display:none.
https://pasteboard.co/FO0wXWdehazL.png https://pasteboard.co/KGiPlOE3ISgS.png
Setting the height to 1px makes everything work completely fine while still hiding category labels.
https://pasteboard.co/TpFaIyKvNTJO.png
Good luck in future development :)
@cazimr this is a riddle for me. I tried reproducing your own setup with your exact code and other configs as well on multiple browsers and multiple OSs.
I am wondering: Can you try reproducing it in isolate, as in codesandbox or just an empty react app? If it works, we know this issue is isolated to your app, and then we can start looking into the root cause (some css override, some react lifecycle edge case that I did not account for, etc).
Waiting to hear what you come up with
@ealush I experience the same issue. Entire categories aren't loading, until I scoll back. Your demo also feels a bit buggy, when scrolling very fast, but I couldn't yet reproduce the issue there.
The issue was introduced with version 4.14.0 -> 4.14.1 . Unfortunately 4.14.0 causes my modal, which renders the picker, to open with a very noticable lag (I guess the initial render blocks the thread for longer time).
@ealush I think, I actually found the reason and will probably attempt to make a pull request later.
I have also an idea regarding the laggy scroll, maybe I will also try to fix this as well (though this is not that important and only apparent when scrolling fast)