From 5d6f3a5c8bd3acc53e51b4300c93051ddc1b627b Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Thu, 7 Jul 2022 23:10:06 -0400 Subject: [PATCH] Tweak efficiency when changing filter keywords in emoji picker --- src/components/emoji_picker/emoji_picker.js | 31 +++++++++++++-------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 3cb6f76d..6a7b5285 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -17,7 +17,7 @@ import { faCode, faFlag } from '@fortawesome/free-solid-svg-icons' -import { trim } from 'lodash' +import { debounce, trim } from 'lodash' library.add( faBoxOpen, @@ -86,7 +86,8 @@ const EmojiPicker = { // Lazy-load only after the first time `showing` becomes true. contentLoaded: false, groupRefs: {}, - emojiRefs: {} + emojiRefs: {}, + filteredEmojiGroups: [] } }, components: { @@ -206,6 +207,7 @@ const EmojiPicker = { const oldContentLoaded = this.contentLoaded this.contentLoaded = true this.waitForDomAndInitializeLazyLoad() + this.filteredEmojiGroups = this.getFilteredEmojiGroups() if (!oldContentLoaded) { this.$nextTick(() => { if (this.defaultGroup) { @@ -213,15 +215,24 @@ const EmojiPicker = { } }) } + }, + getFilteredEmojiGroups () { + return this.allEmojiGroups + .map(group => ({ + ...group, + emojis: filterByKeyword(group.emojis, trim(this.keyword)) + })) + .filter(group => group.emojis.length > 0) } }, watch: { keyword () { this.onScroll() - this.waitForDomAndInitializeLazyLoad() + this.debouncedHandleKeywordChange() }, allCustomGroups () { this.waitForDomAndInitializeLazyLoad() + this.filteredEmojiGroups = this.getFilteredEmojiGroups() }, showing (val) { if (val) { @@ -266,16 +277,14 @@ const EmojiPicker = { .map(([_, v]) => v) .concat(this.unicodeEmojiGroups) }, - filteredEmojiGroups () { - return this.allEmojiGroups - .map(group => ({ - ...group, - emojis: filterByKeyword(group.emojis, trim(this.keyword)) - })) - .filter(group => group.emojis.length > 0) - }, stickerPickerEnabled () { return (this.$store.state.instance.stickers || []).length !== 0 + }, + debouncedHandleKeywordChange () { + return debounce(() => { + this.waitForDomAndInitializeLazyLoad() + this.filteredEmojiGroups = this.getFilteredEmojiGroups() + }, 500) } } }