Merge pull request #38 from snowyu/bug/picker-slowing-down

[bug] fixed picker component slowing down other Vue components
jm-david · Nov 19, 2018 · 8433a3a · 8433a3a
2 parents 7dd078f + 0a7c778
commit 8433a3a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git a/src/components/emoji/nimbleEmoji.vue b/src/components/emoji/nimbleEmoji.vue
@@ -25,15 +25,17 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      mutableData: this.data.compressed ? uncompress(this.data) : this.data,
+    }
+  },
   computed: {
-    parsedData() {
-      return this.data.compressed ? uncompress(this.data) : this.data
-    },
     emojiData() {
-      return getData(this.emoji, this.skin, this.set, this.parsedData)
+      return getData(this.emoji, this.skin, this.set, this.mutableData)
     },
     sanitizedData() {
-      return getSanitizedData(this.emoji, this.skin, this.set, this.parsedData)
+      return getSanitizedData(this.emoji, this.skin, this.set, this.mutableData)
     },
     canRender() {
       return this.isCustom || this.isNative || this.hasEmoji || this.fallback

diff --git a/src/components/picker/nimblePicker.vue b/src/components/picker/nimblePicker.vue
@@ -3,8 +3,8 @@
 <div class="emoji-mart" :style="customStyles">
   <div class="emoji-mart-bar" v-if="showCategories">
     <anchors
-      :data="parsedData"
-      :i18n="mergedI18n"
+      :data="mutableData"
+      :i18n="mutableI18n"
       :color="color"
       :categories="filteredCategories"
       :active-category="activeCategory"
@@ -15,8 +15,8 @@
   <search
     v-if="showSearch"
     ref="search"
-    :data="parsedData"
-    :i18n="mergedI18n"
+    :data="mutableData"
+    :i18n="mutableI18n"
     :emojis-to-show-filter="emojisToShowFilter"
     :include="include"
     :exclude="exclude"
@@ -29,8 +29,8 @@
   <div class="emoji-mart-scroll" ref="scroll" @scroll="onScroll">
     <category
       v-show="searchEmojis"
-      :data="parsedData"
-      :i18n="mergedI18n"
+      :data="mutableData"
+      :i18n="mutableI18n"
       id="search"
       name="Search"
       :emojis="searchEmojis"
@@ -41,8 +41,8 @@
       v-show="!searchEmojis && (infiniteScroll || category == activeCategory)"
       ref="categories"
       :key="category.id"
-      :data="parsedData"
-      :i18n="mergedI18n"
+      :data="mutableData"
+      :i18n="mutableI18n"
       :id="category.id"
       :name="category.name"
       :emojis="category.emojis"
@@ -52,7 +52,7 @@
 
   <div class="emoji-mart-bar" v-if="showPreview">
     <preview
-      :data="parsedData"
+      :data="mutableData"
       :title="title"
       :emoji="previewEmoji"
       :idle-emoji="emoji"
@@ -132,11 +132,13 @@ export default {
     }
 
     if (this.emojisToShowFilter) {
-      customEmojis = customEmojis.filter(e => this.emojisToShowFilter(this.parsedData.emojis[e] || e))
-      recentEmojis = recentEmojis.filter(e => this.emojisToShowFilter(this.parsedData.emojis[e] || e))
+      customEmojis = customEmojis.filter(e => this.emojisToShowFilter(this.mutableData.emojis[e] || e))
+      recentEmojis = recentEmojis.filter(e => this.emojisToShowFilter(this.mutableData.emojis[e] || e))
     }
 
     return {
+      mutableData: this.data.compressed ? uncompress(this.data) : this.data,
+      mutableI18n: deepMerge(I18N, this.i18n),
       activeSkin: this.skin || store.get('skin') || this.defaultSkin,
       categories: [],
       activeCategory: null,
@@ -147,9 +149,6 @@ export default {
     }
   },
   computed: {
-    parsedData() {
-      return this.data.compressed ? uncompress(this.data) : this.data
-    },
     customStyles() {
       return {
         width: this.calculateWidth + 'px',
@@ -187,23 +186,20 @@ export default {
 
         if (this.emojisToShowFilter) {
           hasEmojis = category.emojis.some((emoji) => {
-            return this.emojisToShowFilter(this.parsedData.emojis[emoji] || emoji)
+            return this.emojisToShowFilter(this.mutableData.emojis[emoji] || emoji)
           })
         }
 
         return isIncluded && !isExcluded && hasEmojis
       })
     },
-    mergedI18n() {
-      return deepMerge(I18N, this.i18n)
-    }
   },
   created() {
-    let categories = this.parsedData.categories.map(c => {
+    let categories = this.mutableData.categories.map(c => {
       let { id, name, emojis } = c
 
       if (this.emojisToShowFilter) {
-        emojis = c.emojis.filter(e => this.emojisToShowFilter(this.parsedData.emojis[e] || e))
+        emojis = c.emojis.filter(e => this.emojisToShowFilter(this.data.emojis[e] || e))
       }
 
       return { id, name, emojis }