Improvements to Emoji Loading Mechanism

Fixed Emojis FrontendFixture Creature

app/assets/javascripts/behaviors/gl_emoji.js

@@ -13,8 +13,7 @@ class GlEmoji extends HTMLElement {
     const { fallbackSpriteClass, fallbackSrc } = this.dataset;
     let { name, unicodeVersion } = this.dataset;
 
-    return initEmojiMap()
-      .then(() => {
+    return initEmojiMap().then(() => {
       if (!unicodeVersion) {
         const emojiInfo = getEmojiInfo(name);
 
@@ -24,7 +23,7 @@ class GlEmoji extends HTMLElement {
             this.dataset.name = emojiInfo.name;
           }
           unicodeVersion = emojiInfo.u;
-            this.dataset.uni = unicodeVersion;
+          this.dataset.unicodeVersion = unicodeVersion;
 
           emojiUnicode = emojiInfo.e;
           this.innerHTML = emojiInfo.e;
@@ -64,10 +63,6 @@ class GlEmoji extends HTMLElement {
           this.innerHTML = emojiImageTag(name, src);
         }
       }
-      })
-      .catch(error => {
-        // Only reject is already handled in initEmojiMap
-        throw error;
     });
   }
 }

app/assets/javascripts/emoji/index.js

@@ -5,19 +5,25 @@ 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) => {
+  emojiPromise =
+    emojiPromise ||
+    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));
+      } 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 {
@@ -31,7 +37,8 @@ export function initEmojiMap() {
             validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
             resolve(emojiMap);
             if (isLocalStorageAvailable) {
-            window.localStorage.setItem(EMOJI_VERSION_LOCALSTORAGE, JSON.stringify(emojiMap));
+              window.localStorage.setItem('gl-emoji-map-version', EMOJI_VERSION);
+              window.localStorage.setItem('gl-emoji-map', JSON.stringify(emojiMap));
             }
           })
           .catch(err => {
@@ -39,6 +46,8 @@ export function initEmojiMap() {
           });
       }
     });
+
+  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