Only preload emoji after the window is fully loaded

js/background.js

@@ -37,6 +37,7 @@
   );
 
   // Load these images now to ensure that they don't flicker on first use
+  window.Signal.EmojiLib.preloadImages();
   const images = [];
   function preload(list) {
     for (let index = 0, max = list.length; index < max; index += 1) {

js/modules/signal.js

@@ -7,6 +7,7 @@ const Data = require('./data');
 const Database = require('./database');
 const Emojis = require('./emojis');
 const Emoji = require('../../ts/util/emoji');
+const EmojiLib = require('../../ts/components/emoji/lib');
 const IndexedDB = require('./indexeddb');
 const Notifications = require('../../ts/notifications');
 const OS = require('../../ts/OS');
@@ -335,6 +336,7 @@ exports.setup = (options = {}) => {
     Database,
     Emojis,
     Emoji,
+    EmojiLib,
     IndexedDB,
     LinkPreviews,
     Metadata,

ts/components/emoji/lib.ts

@@ -72,23 +72,25 @@ const makeImagePath = (src: string) => {
 
 export const images = new Set();
 
-// Preload images
-const preload = (src: string) => {
-  const img = new Image();
-  img.src = src;
-  images.add(img);
+export const preloadImages = () => {
+  // Preload images
+  const preload = (src: string) => {
+    const img = new Image();
+    img.src = src;
+    images.add(img);
+  };
+
+  data.forEach(emoji => {
+    preload(makeImagePath(emoji.image));
+
+    if (emoji.skin_variations) {
+      Object.values(emoji.skin_variations).forEach(variation => {
+        preload(makeImagePath(variation.image));
+      });
+    }
+  });
 };
 
-data.forEach(emoji => {
-  preload(makeImagePath(emoji.image));
-
-  if (emoji.skin_variations) {
-    Object.values(emoji.skin_variations).forEach(variation => {
-      preload(makeImagePath(variation.image));
-    });
-  }
-});
-
 export const dataByShortName = keyBy(data, 'short_name');
 
 data.forEach(emoji => {