feat: add lazy loading to emoji image list

delowardev / vue3-emoji-picker

Simple and Powerful Emoji Picker for Vue3

https://codesandbox.io/p/github/delowardev/vue3-emoji-picker/main?file=%2FREADME.md

MIT License

171 stars 34 forks source link

feat: add lazy loading to emoji image list #55

Open Vuurvos1 opened 12 months ago

Vuurvos1 commented 12 months ago

Context

Improve image loading performance by only loading images that are in view

Summary

Added loading="lazy" to emoji images in body

Relevant Technical Choices

To-do

User-facing changes

Nothing visual changes for the end user

Checklist

[x] I have tested this code to the best of my abilities
[x] I have added documentation where necessary

Fixes #17

codesandbox[bot] commented 12 months ago

This branch is running in CodeSandbox. Use the links below to review this PR faster.
CodeSandbox logo Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview

delowardev commented 12 months ago

Hi @Vuurvos1, Thanks so much for taking this issue;

I was thinking of adding a lazy load to the full group; for example, when smileys_people group is in the viewport, it should load all emojis for smileys_people group. Otherwise, visitors may feel a little annoyed if they need to wait to see every emoji.

Another concern is that it may not be a good idea to force lazy-loading for all images; instead we can add an option/prop like this: <EmojiPicker :lazy="true" @select="onSelectEmoji" />