From f1168db1c897fccea3a4a856bd8ed1f6ed8ff0ae Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Mon, 30 Apr 2018 18:42:17 +1000
Subject: [PATCH] PERF: make emoji picker faster

---
 .../discourse/components/emoji-picker.js.es6  | 23 +++++++++----------
 1 file changed, 11 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 2cd8bb79a17..287943c9b76 100644
--- a/app/assets/javascripts/discourse/components/emoji-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
@@ -46,11 +46,11 @@ export default Ember.Component.extend({
 
     run.scheduleOnce("afterRender", this, function() {
       this._bindEvents();
-      this._sectionLoadingCheck();
       this._loadCategoriesEmojis();
       this._positionPicker();
       this._scrollTo();
       this._updateSelectedDiversity();
+      this._checkVisibleSection();
     });
   },
 
@@ -147,11 +147,6 @@ export default Ember.Component.extend({
       .addClass("selected");
   },
 
-  _sectionLoadingCheck() {
-    this._checkTimeout = setTimeout(() => { this._sectionLoadingCheck(); }, 500);
-    run.throttle(this, this._checkVisibleSection, 100);
-  },
-
   _loadCategoriesEmojis() {
     $.each(this.$picker.find(".categories-column button.emoji"), (_, button) => {
       const $button = $(button);
@@ -322,7 +317,7 @@ export default Ember.Component.extend({
   _bindSectionsScroll() {
     this.$list.on("scroll", () => {
       this.scrollPosition = this.$list.scrollTop();
-      run.throttle(this, this._checkVisibleSection, 150);
+      run.debounce(this, this._checkVisibleSection, 50);
     });
   },
 
@@ -364,15 +359,19 @@ export default Ember.Component.extend({
     }
 
     const listHeight = this.$list.innerHeight();
+
+
     this.$visibleSections.forEach(visibleSection => {
       const $unloadedEmojis = $(visibleSection).find("button.emoji[data-loaded!='1']");
       $.each($unloadedEmojis, (_, button) => {
-        const $button = $(button);
-        const buttonTop = $button.position().top;
-        const buttonHeight = $button.height();
 
-        if(buttonTop + buttonHeight > 0 && buttonTop - buttonHeight < listHeight) {
-          this._setButtonBackground($button);
+        let offsetTop = button.offsetTop;
+
+        if (offsetTop < this.scrollPosition + listHeight + 200) {
+          if (offsetTop + 200 > this.scrollPosition) {
+            const $button = $(button);
+            this._setButtonBackground($button);
+          }
         }
       });
     });