Merge branch 'emoji-optimizations' into shigusegubu

* emoji-optimizations:
  moved emoji fetching from user to instance since it's its state anyway
  always preload first batch of emoji to avoid unnecessary UI jumps

src/components/emoji_picker/emoji_picker.js

@@ -24,9 +24,10 @@ const EmojiPicker = {
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
-      customEmojiBuffer: [],
+      customEmojiBuffer: (this.$store.state.instance.customEmoji || [])
+        .slice(0, LOAD_EMOJI_BY),
       customEmojiTimeout: null,
-      customEmojiCounter: 0,
+      customEmojiCounter: LOAD_EMOJI_BY,
       customEmojiLoadAllConfirmed: false
     }
   },
@@ -89,13 +90,23 @@ const EmojiPicker = {
       this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
       this.customEmojiCounter += LOAD_EMOJI_BY
     },
-    startEmojiLoad () {
+    startEmojiLoad (forceUpdate = false) {
+      const bufferSize = this.customEmojiBuffer.length
+      const bufferPrefilledSane = bufferSize === LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed
+      const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
+      if (!forceUpdate || bufferPrefilledSane || bufferPrefilledAll) {
+        return
+      }
       if (this.customEmojiTimeout) {
         window.clearTimeout(this.customEmojiTimeout)
       }
 
-      set(this, 'customEmojiBuffer', [])
-      this.customEmojiCounter = 0
+      set(
+        this,
+        'customEmojiBuffer',
+        this.filteredEmoji.slice(0, LOAD_EMOJI_BY)
+      )
+      this.customEmojiCounter = LOAD_EMOJI_BY
       this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
     },
     continueEmojiLoad () {
@@ -116,8 +127,9 @@ const EmojiPicker = {
   },
   watch: {
     keyword () {
+      this.customEmojiLoadAllConfirmed = false
       this.scrolledGroup()
-      this.startEmojiLoad()
+      this.startEmojiLoad(true)
     }
   },
   computed: {

src/modules/instance.js

@@ -36,7 +36,9 @@ const defaultState = {
   // Nasty stuff
   pleromaBackend: true,
   emoji: [],
+  emojiFetched: false,
   customEmoji: [],
+  customEmojiFetched: false,
   restrictedNicknames: [],
   postFormats: [],
 
@@ -94,9 +96,68 @@ const instance = {
           break
       }
     },
+    async getStaticEmoji ({ commit }) {
+      try {
+        const res = await window.fetch('/static/emoji.json')
+        if (res.ok) {
+          const values = await res.json()
+          const emoji = Object.keys(values).map((key) => {
+            return {
+              displayText: key,
+              imageUrl: false,
+              replacement: values[key]
+            }
+          }).sort((a, b) => a.displayText - b.displayText)
+          commit('setInstanceOption', { name: 'emoji', value: emoji })
+        } else {
+          throw (res)
+        }
+      } catch (e) {
+        console.warn("Can't load static emoji")
+        console.warn(e)
+      }
+    },
+
+    async getCustomEmoji ({ commit, state }) {
+      try {
+        const res = await window.fetch('/api/pleroma/emoji.json')
+        if (res.ok) {
+          const result = await res.json()
+          const values = Array.isArray(result) ? Object.assign({}, ...result) : result
+          const emoji = Object.entries(values).map(([key, value]) => {
+            const imageUrl = value.image_url
+            return {
+              displayText: key,
+              imageUrl: imageUrl ? state.server + imageUrl : value,
+              tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
+              replacement: `:${key}: `
+            }
+            // Technically could use tags but those are kinda useless right now,
+            // should have been "pack" field, that would be more useful
+          }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0)
+          commit('setInstanceOption', { name: 'customEmoji', value: emoji })
+        } else {
+          throw (res)
+        }
+      } catch (e) {
+        console.warn("Can't load custom emojis")
+        console.warn(e)
+      }
+    },
+
     setTheme ({ commit }, themeName) {
       commit('setInstanceOption', { name: 'theme', value: themeName })
       return setPreset(themeName, commit)
+    },
+    fetchEmoji ({ dispatch, state }) {
+      if (!state.customEmojiFetched) {
+        state.customEmojiFetched = true
+        dispatch('getCustomEmoji')
+      }
+      if (!state.emojiFetched) {
+        state.emojiFetched = true
+        dispatch('getStaticEmoji')
+      }
     }
   }
 }

src/modules/users.js

@@ -60,56 +60,6 @@ const unmuteUser = (store, id) => {
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
-const getStaticEmoji = async (store) => {
-  try {
-    const res = await window.fetch('/static/emoji.json')
-    if (res.ok) {
-      const values = await res.json()
-      const emoji = Object.keys(values).map((key) => {
-        return {
-          displayText: key,
-          imageUrl: false,
-          replacement: values[key]
-        }
-      }).sort((a, b) => a.displayText - b.displayText)
-      store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
-    } else {
-      throw (res)
-    }
-  } catch (e) {
-    console.warn("Can't load static emoji")
-    console.warn(e)
-  }
-}
-
-// This is also used to indicate if we have a 'pleroma backend' or not.
-// Somewhat weird, should probably be somewhere else.
-const getCustomEmoji = async (store) => {
-  try {
-    const res = await window.fetch('/api/pleroma/emoji.json')
-    if (res.ok) {
-      const result = await res.json()
-      const values = Array.isArray(result) ? Object.assign({}, ...result) : result
-      const emoji = Object.entries(values).map(([key, value]) => {
-        const imageUrl = value.image_url
-        return {
-          displayText: key,
-          imageUrl: imageUrl ? store.rootState.instance.server + imageUrl : value,
-          tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
-          replacement: `:${key}: `
-        }
-        // Technically could use tags but those are kinda useless right now, should have been "pack" field, that would be more useful
-      }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0)
-      store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
-    } else {
-      throw (res)
-    }
-  } catch (e) {
-    console.warn("Can't load custom emojis")
-    console.warn(e)
-  }
-}
-
 export const mutations = {
   setMuted (state, { user: { id }, muted }) {
     const user = state.usersObject[id]
@@ -484,8 +434,7 @@ const users = {
               commit('setCurrentUser', user)
               commit('addNewUsers', [user])
 
-              getCustomEmoji(store)
-              getStaticEmoji(store)
+              store.dispatch('fetchEmoji')
 
               getNotificationPermission()
                 .then(permission => commit('setNotificationPermission', permission))