perf: don't fetch custom emoji on every page load (#1451)

fixes #812

follow-up to #1448 and #1450

src/routes/_actions/emoji.js

@@ -1,10 +1,13 @@
-import { cacheFirstUpdateAfter } from '../_utils/sync'
+import {
+  cacheFirstUpdateAfter,
+  cacheFirstUpdateOnlyIfNotInCache
+} from '../_utils/sync'
 import { database } from '../_database/database'
 import { getCustomEmoji } from '../_api/emoji'
 import { store } from '../_store/store'
 
-export async function updateCustomEmojiForInstance (instanceName) {
+async function syncEmojiForInstance (instanceName, syncMethod) {
-  await cacheFirstUpdateAfter(
+  await syncMethod(
     () => getCustomEmoji(instanceName),
     () => database.getCustomEmoji(instanceName),
     emoji => database.setCustomEmoji(instanceName, emoji),
@@ -16,6 +19,14 @@ export async function updateCustomEmojiForInstance (instanceName) {
   )
 }
 
+export async function updateCustomEmojiForInstance (instanceName) {
+  await syncEmojiForInstance(instanceName, cacheFirstUpdateAfter)
+}
+
+export async function setupCustomEmojiForInstance (instanceName) {
+  await syncEmojiForInstance(instanceName, cacheFirstUpdateOnlyIfNotInCache)
+}
+
 export function insertEmoji (realm, emoji) {
   const emojiText = emoji.custom ? emoji.colons : emoji.native
   const { composeSelectionStart } = store.get()

src/routes/_components/compose/ComposeToolbar.html

@@ -68,6 +68,7 @@
   import { toggleContentWarningShown } from '../../_actions/contentWarnings'
   import { mediaAccept } from '../../_static/media'
   import { enablePoll, disablePoll } from '../../_actions/composePoll'
+  import { updateCustomEmojiForInstance } from '../../_actions/emoji'
 
   export default {
     components: {
@@ -80,7 +81,11 @@
     methods: {
       async onEmojiClick () {
         const { realm } = this.get()
-        const showEmojiDialog = await importShowEmojiDialog()
+        const { currentInstance } = this.store.get()
+        const [showEmojiDialog] = await Promise.all([
+          importShowEmojiDialog(),
+          updateCustomEmojiForInstance(currentInstance)
+        ])
         showEmojiDialog(realm)
       },
       onMediaClick () {

src/routes/_store/observers/instanceObservers.js

@@ -2,7 +2,7 @@ import { updateInstanceInfo, updateVerifyCredentialsForInstance } from '../../_a
 import { setupListsForInstance } from '../../_actions/lists'
 import { createStream } from '../../_actions/stream/streaming'
 import { updatePushSubscriptionForInstance } from '../../_actions/pushSubscription'
-import { updateCustomEmojiForInstance } from '../../_actions/emoji'
+import { setupCustomEmojiForInstance } from '../../_actions/emoji'
 import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
 import { mark, stop } from '../../_utils/marks'
 import { store } from '../store'
@@ -41,7 +41,7 @@ async function doRefreshInstanceDataAndStream (store, instanceName) {
 
 async function refreshInstanceData (instanceName) {
   // these are all low-priority
-  scheduleIdleTask(() => updateCustomEmojiForInstance(instanceName))
+  scheduleIdleTask(() => setupCustomEmojiForInstance(instanceName))
   scheduleIdleTask(() => setupListsForInstance(instanceName))
   scheduleIdleTask(() => updatePushSubscriptionForInstance(instanceName))