From ef581e8ff9578a9beede033997147ef75e986fb9 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Mon, 27 Jan 2025 18:19:28 +0100 Subject: [PATCH] perf(NcEmojiIndex): init EmojiIndex in idle time Signed-off-by: Grigorii K. Shartsev --- .../NcEmojiPicker/NcEmojiPicker.vue | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue index d6fd1cb752..549593308e 100644 --- a/src/components/NcEmojiPicker/NcEmojiPicker.vue +++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue @@ -211,10 +211,24 @@ import NcColorPicker from '../NcColorPicker/NcColorPicker.vue' import NcPopover from '../NcPopover/index.js' import NcTextField from '../NcTextField/index.js' -// Shared emoji index and skinTone for all NcEmojiPicker instances -// Will be initialized on the first NcEmojiPicker creating let emojiIndex +/** + * Initialize shared EmojiIndex if it's not initialized yet + */ +function initEmojiIndexIfNeeded() { + if (!emojiIndex) { + emojiIndex = new EmojiIndex(data) + } +} + +// Initializing EmojiIndex may take up to 100ms... +// - Doing it in module-scope leads to blocking the main thread on page init (unacceptable) +// - Doing it in setup leads to blocking the thread on the first NcEmojiPicker creating (more or less acceptable) +// The best - do it in the idle time if possible. +// This method is not available in Safari - it will load EmojiIndex on the first NcEmojiPicker creating in setup. +window.requestIdleCallback?.(initEmojiIndexIfNeeded) + const i18n = { search: t('Search emoji'), notfound: t('No emoji found'), @@ -334,10 +348,7 @@ export default { const _log = (...args) => log(id, ...args) _log('setup | start') - // If this is the first instance of NcEmojiPicker - setup EmojiIndex - if (!emojiIndex) { - emojiIndex = new EmojiIndex(data) - } + initEmojiIndexIfNeeded() _log('setup | end')