From 63a5402182aa9697bbd9e2d7192ef661c6d74b86 Mon Sep 17 00:00:00 2001
From: Fatih Acet <acetfatih@gmail.com>
Date: Mon, 30 May 2016 20:04:08 +0300
Subject: [PATCH] Create and show emoji loader on the fly.

---
 app/assets/javascripts/awards_handler.coffee | 24 ++++++++++++++++----
 app/assets/stylesheets/pages/awards.scss     |  3 ++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index 8a6f6d7d185..e01c5d68c43 100644
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -100,12 +100,13 @@ class @AwardsHandler
     $menu.css(css)
 
 
-  addAward: (votesBlock, awardUrl, emoji, checkMutuality = yes) ->
+  addAward: (votesBlock, awardUrl, emoji, checkMutuality = yes, callback) ->
 
     emoji = @normilizeEmojiName emoji
 
     @postEmoji awardUrl, emoji, =>
       @addAwardToEmojiBar votesBlock, emoji, checkMutuality
+      callback?()
 
     $('.emoji-menu').removeClass 'is-visible'
 
@@ -146,11 +147,24 @@ class @AwardsHandler
     awardUrl = @getAwardUrl()
 
     if emoji in [ 'thumbsup', 'thumbsdown' ]
-      mutualVote = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
-      selector   = "[data-emoji=#{mutualVote}]"
+      mutualVote     = if emoji is 'thumbsup' then 'thumbsdown' else 'thumbsup'
+      $emojiButton   = votesBlock.find("[data-emoji=#{mutualVote}]").parent()
+      isAlreadyVoted = $emojiButton.hasClass 'active'
 
-      isAlreadyVoted = votesBlock.find(selector).parent().hasClass 'active'
-      @addAward votesBlock, awardUrl, mutualVote, no if isAlreadyVoted
+      if isAlreadyVoted
+        @showEmojiLoader $emojiButton
+        @addAward votesBlock, awardUrl, mutualVote, no, ->
+          $emojiButton.removeClass 'is-loading'
+
+
+  showEmojiLoader: ($emojiButton) ->
+
+    $loader = $emojiButton.find '.fa-spinner'
+
+    unless $loader.length
+      $emojiButton.append '<i class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>'
+
+    $emojiButton.addClass 'is-loading'
 
 
   isActive: ($emojiButton) -> $emojiButton.hasClass 'active'
diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss
index 56d04229f0b..05d1ee5b998 100644
--- a/app/assets/stylesheets/pages/awards.scss
+++ b/app/assets/stylesheets/pages/awards.scss
@@ -109,7 +109,8 @@
   }
 
   &.is-loading {
-    .award-control-icon-normal {
+    .award-control-icon-normal,
+    .emoji-icon {
       display: none;
     }