From 79c8b505e86c5b6bb4d89ceb0edf7ca1a9e28866 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 21 Jul 2017 14:18:02 +0200
Subject: [PATCH] FIX: faster successive loading of emojis

---
 .../discourse/components/emoji-picker.js.es6  | 32 +++++++++++++++----
 .../templates/emoji-picker.raw.hbs.erb        |  8 ++---
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js.es6 b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
index 2a573b5934f..d032c63abf3 100644
--- a/app/assets/javascripts/discourse/components/emoji-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
@@ -9,12 +9,14 @@ const keyValueStore = new KeyValueStore("discourse_emojis_");
 const EMOJI_USAGE = "emojiUsage";
 const EMOJI_SCROLL_Y = "emojiScrollY";
 const EMOJI_SELECTED_DIVERSITY = "emojiSelectedDiversity";
+const EMOJI_CACHED_SECTIONS = "emojiCachedSections";
 const PER_ROW = 11;
 const customEmojis = _.map(_.keys(extendedEmojiList()), code => {
   return { code, src: emojiUrlFor(code) };
 });
 
 export function resetCache() {
+  keyValueStore.setObject({ key: EMOJI_CACHED_SECTIONS, value: [] });
   keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
   keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 });
   keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 });
@@ -43,6 +45,10 @@ export default Ember.Component.extend({
 
     $picker = this.$(".emoji-picker");
 
+    if (!keyValueStore.getObject(EMOJI_CACHED_SECTIONS)) {
+      keyValueStore.setObject({ key: EMOJI_CACHED_SECTIONS, value: [] });
+    }
+
     if (!keyValueStore.getObject(EMOJI_USAGE)) {
       keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
     } else if(_.isPlainObject(keyValueStore.getObject(EMOJI_USAGE))) {
@@ -328,14 +334,15 @@ export default Ember.Component.extend({
     }
 
     if(selectedSection) {
+      const sectionTitle = selectedSection.$section.data("section");
       $picker.find(".category-icon").removeClass("current");
-      $picker.find(`.category-icon a[title='${selectedSection.$section.data("section")}']`)
+      $picker.find(`.category-icon a[title='${sectionTitle}']`)
              .parent()
              .addClass("current");
 
       if(!selectedSection.$section.hasClass("loaded")) {
         selectedSection.$section.addClass("loaded");
-        this._loadVisibleEmojis(selectedSection.$section.find(".emoji[src='']"));
+        this._loadSection(selectedSection.$section);
       }
 
       //preload surrounding sections
@@ -343,8 +350,7 @@ export default Ember.Component.extend({
       const preloadedSection = sections[selectedSectionIndex + 1] || sections[selectedSectionIndex - 1];
       if(preloadedSection && !preloadedSection.$section.hasClass("loaded")) {
         preloadedSection.$section.addClass("loaded");
-        const $visibleEmojis = preloadedSection.$section.find(".emoji[src='']");
-        Ember.run.later(this, () => this._loadVisibleEmojis($visibleEmojis), 1500);
+        this._loadSection(preloadedSection.$section);
       }
     }
   },
@@ -469,8 +475,22 @@ export default Ember.Component.extend({
     $picker.find(".info").css("max-width", infoMaxWidth);
   },
 
-  _loadVisibleEmojis($visibleEmojis) {
-    $.each($visibleEmojis, (_, icon) => this._setIconSrc(icon) );
+  _loadSection($section) {
+    const sectionName = $section.data("section");
+    if(keyValueStore.getObject(EMOJI_CACHED_SECTIONS).indexOf(sectionName) > -1) {
+      $.each($section.find(".emoji[src='']"), (_, icon) => this._setIconSrc(icon) );
+    } else {
+      Ember.run.later(
+        this, () => {
+          keyValueStore.setObject({
+            key: EMOJI_CACHED_SECTIONS,
+            value: keyValueStore.getObject(EMOJI_CACHED_SECTIONS).concat(sectionName)
+          });
+          $.each($section.find(".emoji[src='']"), (_, icon) => this._setIconSrc(icon) );
+        },
+        1500
+      );
+    }
   },
 
   _codeWithDiversity(code, diversity) {
diff --git a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
index e5f8a72139e..97f9c694c99 100644
--- a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
+++ b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
@@ -48,13 +48,9 @@
           <span class="title">{{i18n 'emoji_picker.<%= group["name"] %>'}}</span>
         </div>
         <div class='section-group'>
-          <% group["icons"].each.with_index  do |icon, icon_index| %>
+          <% group["icons"].each  do |icon| %>
             <a title='<%= icon["name"] %>'>
-              <% if group_index == 0 && icon_index <= 77 %>
-                <img src='<%= Emoji.url_for(icon['name']) %>' class='emoji <%= "diversity" if icon["diversity"] %>'>
-              <% else %>
-                <img src='' class='emoji <%= "diversity" if icon["diversity"] %>'>
-              <% end %>
+              <img src='' class='emoji <%= "diversity" if icon["diversity"] %>'>
             </a>
           <% end %>
         </div>