emoji picker gradual render

1 files changed, 39 insertions, 3 deletions

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 824412dd..81f7437f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,3 +1,4 @@
+import { set } from 'vue'
 
 const filterByKeyword = (list, keyword = '') => {
   return list.filter(x => x.displayText.includes(keyword))
@@ -18,7 +19,10 @@ const EmojiPicker = {
       activeGroup: 'custom',
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
-      keepOpen: false
+      keepOpen: false,
+      customEmojiBuffer: [],
+      customEmojiInterval: null,
+      customEmojiCounter: 0
     }
   },
   components: {
@@ -57,6 +61,36 @@ const EmojiPicker = {
         })
       })
     },
+    restartInterval () {
+      const customEmojis = filterByKeyword(
+        this.$store.state.instance.customEmoji || [],
+        this.keyword
+      )
+      const amount = 50
+      const interval = 100
+
+      if (this.customEmojiInterval) {
+        window.clearInterval(this.customEmojiInterval)
+      }
+      window.setTimeout(
+        window.clearInterval(this.customEmojiInterval),
+        1000
+      )
+      set(this, 'customEmojiBuffer', [])
+      this.customEmojiCounter = 0
+      this.customEmojiInterval = window.setInterval(() => {
+        console.log(this.customEmojiBuffer.length)
+        console.log(customEmojis.length)
+        if (this.customEmojiBuffer.length < customEmojis.length) {
+          this.customEmojiBuffer.push(
+            ...customEmojis.slice(this.customEmojiCounter, this.customEmojiCounter + amount)
+          )
+        } else {
+          window.clearInterval(this.customEmojiInterval)
+        }
+        this.customEmojiCounter += amount
+      }, interval)
+    },
     toggleStickers () {
       this.showingStickers = !this.showingStickers
     },
@@ -73,6 +107,7 @@ const EmojiPicker = {
   watch: {
     keyword () {
       this.scrolledGroup()
+      this.restartInterval()
     }
   },
   computed: {
@@ -87,13 +122,14 @@ const EmojiPicker = {
     },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
-      const customEmojis = this.$store.state.instance.customEmoji || []
+      const customEmojis = this.customEmojiBuffer
+
       return [
         {
           id: 'custom',
           text: this.$t('emoji.custom'),
           icon: 'icon-smile',
-          emojis: filterByKeyword(customEmojis, this.keyword)
+          emojis: customEmojis
         },
         {
           id: 'standard',