feat: Optional virtualize, imageUrlFn

[agiangrant]

Description

New props:
imageUrlFn - Allows the fetching of each emoji image URL
virtualize - experimental scrolling for emojis to avoid loading all 3000 emojis in one load.

Motivation and Context

The main motivation for this change was responsiveness when opening the emoji picker around complex components. ngx-emoji-mart works very well in the standalone github page, but when loaded into an app that consumes a fair amount of system resources, the initialization and rendering times of all the emojis were not acceptable. The option to show a single category is better but affects the end-user experience. To mitigate this, virtual scrolling was implemented per category (this could be enhanced to be per row of emojis). Instead of fetching the whole sprite sheet, I've also allowed the option to fetch individual emojis. This is more convenient for those loading a few emojis in view (whether from browser cache or some type of CDN). The use case would be the end-user who uses 10 of the 3000 emojis. Used with the new virtualize prop, it will reduce the amount data getting loaded into ngx-emoji-mart.

How has this been tested?

This has been tested thoroughly on my local machine. Virtualization is completely optional and experimental, so it will need to improved at some point. For now, this will cover basic use cases.

Screenshots (if appropriate):

Looks the same as what exists in master today

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

[acostajohn]

This would be of great help 🙏

[agiangrant]

@scttcper let me know if you need anything from me to get this merged in

[agiangrant]

I'll be adding an optional parameter to allow virtualized offset height virtualizeOffset.

[agiangrant]

I have pushed changes to customize virtual scrolling visibility. README is updated. default is 0. Use a higher, positive integer to increase the number of emojis to render at a time. Use a lower, negative integer to decrease the number of emojis to render at a time.

[agiangrant]

@scttcper All set! Let me know if you find anything else. It's looking smooth on my end. When I find some time I'll look into rendering emojis by row.

[scttcper]

🎉 This PR is included in version 5.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[acostajohn]

Hey guys, I think something else changed because now the performance is increidibly better without using virtualize 😂