From b02de56fcbe8433597a738a797cfe5fb9f57eb3d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 9 Oct 2019 22:33:15 +0300 Subject: [PATCH 1/2] always preload first batch of emoji to avoid unnecessary UI jumps --- src/components/emoji_picker/emoji_picker.js | 24 +++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 29e072996..67b08ef86 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/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 } }, @@ -88,13 +89,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 () { @@ -115,8 +126,9 @@ const EmojiPicker = { }, watch: { keyword () { + this.customEmojiLoadAllConfirmed = false this.scrolledGroup() - this.startEmojiLoad() + this.startEmojiLoad(true) } }, computed: { From c000879f2fb20b273731d78dda5499e4b3cb77c2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 9 Oct 2019 22:50:00 +0300 Subject: [PATCH 2/2] moved emoji fetching from user to instance since it's its state anyway --- src/modules/instance.js | 61 +++++++++++++++++++++++++++++++++++++++++ src/modules/users.js | 53 +---------------------------------- 2 files changed, 62 insertions(+), 52 deletions(-) diff --git a/src/modules/instance.js b/src/modules/instance.js index 7d602aa10..15280e824 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -35,7 +35,9 @@ const defaultState = { // Nasty stuff pleromaBackend: true, emoji: [], + emojiFetched: false, customEmoji: [], + customEmojiFetched: false, restrictedNicknames: [], postFormats: [], @@ -86,9 +88,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') + } } } } diff --git a/src/modules/users.js b/src/modules/users.js index fed948e44..0b2f8a9e7 100644 --- a/src/modules/users.js +++ b/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))