revert removal of requestAnimationFrame and move to a separate MR/discussionrefactor-emoji-utils

1 files changed, 8 insertions, 2 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index f0ccbc4b998..c34d80f0601 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -6,6 +6,10 @@ import * as Emoji from './emoji';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
+const requestAnimationFrame = window.requestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.setTimeout;
 
 const FROM_SENTENCE_REGEX = /(?:, and | and |, )/; // For separating lists produced by ruby's Array#toSentence
 
@@ -46,7 +50,9 @@ export default class AwardsHandler {
     this.registerEventListener('one', $(document), 'mouseenter focus', '.js-add-award', 'mouseenter focus', () => {
       const $menu = $('.emoji-menu');
       if ($menu.length === 0) {
-        setTimeout(() => this.createEmojiMenu());
+        requestAnimationFrame(() => {
+          this.createEmojiMenu();
+        });
       }
     });
     this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => {
@@ -189,7 +195,7 @@ export default class AwardsHandler {
               categoryLabelMap[categoryNameKey],
               emojisInCategory,
             );
-            setTimeout(() => {
+            requestAnimationFrame(() => {
               emojiContentElement.insertAdjacentHTML('beforeend', categoryMarkup);
               resolve();
             });