Improvements to Emoji Loading Mechanism

Fixed Emojis FrontendFixture Creature

app/assets/javascripts/behaviors/gl_emoji.js

@@ -13,62 +13,57 @@ class GlEmoji extends HTMLElement {
     const { fallbackSpriteClass, fallbackSrc } = this.dataset;
     let { name, unicodeVersion } = this.dataset;
 
-    return initEmojiMap()
-      .then(() => {
-        if (!unicodeVersion) {
-          const emojiInfo = getEmojiInfo(name);
+    return initEmojiMap().then(() => {
+      if (!unicodeVersion) {
+        const emojiInfo = getEmojiInfo(name);
 
-          if (emojiInfo) {
-            if (name !== emojiInfo.name) {
-              ({ name } = emojiInfo);
-              this.dataset.name = emojiInfo.name;
-            }
-            unicodeVersion = emojiInfo.u;
-            this.dataset.uni = unicodeVersion;
+        if (emojiInfo) {
+          if (name !== emojiInfo.name) {
+            ({ name } = emojiInfo);
+            this.dataset.name = emojiInfo.name;
+          }
+          unicodeVersion = emojiInfo.u;
+          this.dataset.unicodeVersion = unicodeVersion;
 
-            emojiUnicode = emojiInfo.e;
-            this.innerHTML = emojiInfo.e;
+          emojiUnicode = emojiInfo.e;
+          this.innerHTML = emojiInfo.e;
 
-            this.title = emojiInfo.d;
-          }
+          this.title = emojiInfo.d;
         }
+      }
 
-        const isEmojiUnicode =
-          this.childNodes &&
-          Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+      const isEmojiUnicode =
+        this.childNodes &&
+        Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
 
-        if (
-          emojiUnicode &&
-          isEmojiUnicode &&
-          !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
-        ) {
-          const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-          const hasCssSpriteFallback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+      if (
+        emojiUnicode &&
+        isEmojiUnicode &&
+        !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+      ) {
+        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+        const hasCssSpriteFallback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
-          // CSS sprite fallback takes precedence over image fallback
-          if (hasCssSpriteFallback) {
-            if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-              const emojiSpriteLinkTag = document.createElement('link');
-              emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-              emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-              document.head.appendChild(emojiSpriteLinkTag);
-              gon.emoji_sprites_css_added = true;
-            }
-            // IE 11 doesn't like adding multiple at once :(
-            this.classList.add('emoji-icon');
-            this.classList.add(fallbackSpriteClass);
-          } else if (hasImageFallback) {
-            this.innerHTML = emojiImageTag(name, fallbackSrc);
-          } else {
-            const src = emojiFallbackImageSrc(name);
-            this.innerHTML = emojiImageTag(name, src);
+        // CSS sprite fallback takes precedence over image fallback
+        if (hasCssSpriteFallback) {
+          if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+            const emojiSpriteLinkTag = document.createElement('link');
+            emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+            emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+            document.head.appendChild(emojiSpriteLinkTag);
+            gon.emoji_sprites_css_added = true;
           }
+          // IE 11 doesn't like adding multiple at once :(
+          this.classList.add('emoji-icon');
+          this.classList.add(fallbackSpriteClass);
+        } else if (hasImageFallback) {
+          this.innerHTML = emojiImageTag(name, fallbackSrc);
+        } else {
+          const src = emojiFallbackImageSrc(name);
+          this.innerHTML = emojiImageTag(name, src);
         }
-      })
-      .catch(error => {
-        // Only reject is already handled in initEmojiMap
-        throw error;
-      });
+      }
+    });
   }
 }
 

app/assets/javascripts/emoji/index.js

@@ -5,40 +5,49 @@ import axios from '../lib/utils/axios_utils';
 import AccessorUtilities from '../lib/utils/accessor';
 
 let emojiMap = null;
+let emojiPromise = null;
 let validEmojiNames = null;
 
 export const EMOJI_VERSION = '1';
-const EMOJI_VERSION_LOCALSTORAGE = `EMOJIS_${EMOJI_VERSION}`;
 
 const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
 
 export function initEmojiMap() {
-  return new Promise((resolve, reject) => {
-    if (emojiMap) {
-      resolve(emojiMap);
-    } else if (isLocalStorageAvailable && window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE)) {
-      emojiMap = JSON.parse(window.localStorage.getItem(EMOJI_VERSION_LOCALSTORAGE));
-      validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
-      resolve(emojiMap);
-    } else {
-      // We load the JSON file direct from the server
-      // because it can't be loaded from a CDN due to
-      // cross domain problems with JSON
-      axios
-        .get(`${gon.relative_url_root || ''}/-/emojis/${EMOJI_VERSION}/emojis.json`)
-        .then(({ data }) => {
-          emojiMap = data;
-          validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
-          resolve(emojiMap);
-          if (isLocalStorageAvailable) {
-            window.localStorage.setItem(EMOJI_VERSION_LOCALSTORAGE, JSON.stringify(emojiMap));
-          }
-        })
-        .catch(err => {
-          reject(err);
-        });
-    }
-  });
+  emojiPromise =
+    emojiPromise ||
+    new Promise((resolve, reject) => {
+      if (emojiMap) {
+        resolve(emojiMap);
+      } else if (
+        isLocalStorageAvailable &&
+        window.localStorage.getItem('gl-emoji-map-version') === EMOJI_VERSION &&
+        window.localStorage.getItem('gl-emoji-map')
+      ) {
+        emojiMap = JSON.parse(window.localStorage.getItem('gl-emoji-map'));
+        validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+        resolve(emojiMap);
+      } else {
+        // We load the JSON file direct from the server
+        // because it can't be loaded from a CDN due to
+        // cross domain problems with JSON
+        axios
+          .get(`${gon.relative_url_root || ''}/-/emojis/${EMOJI_VERSION}/emojis.json`)
+          .then(({ data }) => {
+            emojiMap = data;
+            validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+            resolve(emojiMap);
+            if (isLocalStorageAvailable) {
+              window.localStorage.setItem('gl-emoji-map-version', EMOJI_VERSION);
+              window.localStorage.setItem('gl-emoji-map', JSON.stringify(emojiMap));
+            }
+          })
+          .catch(err => {
+            reject(err);
+          });
+      }
+    });
+
+  return emojiPromise;
 }
 
 export function normalizeEmojiName(name) {

spec/frontend/fixtures/emojis.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-describe 'Emojis (JavaScript fixtures)', type: :request do
+RSpec.describe 'Emojis (JavaScript fixtures)', type: :request do
   include JavaScriptFixturesHelpers
 
   before(:all) do