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,14 +72,15 @@ const makeImagePath = (src: string) => {
 
 export const images = new Set();
 
-// Preload images
+export const preloadImages = () => {
-const preload = (src: string) => {
+  // Preload images
+  const preload = (src: string) => {
     const img = new Image();
     img.src = src;
     images.add(img);
-};
+  };
 
-data.forEach(emoji => {
+  data.forEach(emoji => {
     preload(makeImagePath(emoji.image));
 
     if (emoji.skin_variations) {
@@ -87,7 +88,8 @@ data.forEach(emoji => {
         preload(makeImagePath(variation.image));
       });
     }
-});
+  });
+};
 
 export const dataByShortName = keyBy(data, 'short_name');