feat: add lazy loading to emoji image list

[Vuurvos1]

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]]

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

[delowardev]

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" />