nextcloud-libraries / nextcloud-libraries/nextcloud-vue

Lazy load emoji index

Open
#7,199 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug feature: emoji picker feature: functions feature: rich-contenteditable
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

Currently entire emoji data JSON is bundled. It is quite large (around 800 kB).

It makes some functions and components extremely heavy in bundle-size:

  • emojiSearch (sometimes it is used just to get the 5 most recent emojis)
  • NcEmojiPicker (even without opening it)
  • NcRichContenteditable (for : autocomplete, that may not even be used by the user)

Proposal:

  • Add async emojiSearchLazy that only loads the index on the first usage
  • NcEmojiPicker: load emojis only after open
  • NcRichContenteditable: use async list loader for emoji picker

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the current emojiSearch implementation and the emoji data import, then inspect NcEmojiPicker and NcRichContenteditable to understand when each requests emoji data. Done means the index is loaded only when search, picker opening, or autocomplete requires it, rather than being bundled eagerly for every use.

Written by the indexing model from the issue text.

Assessment

Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.