From 645c9c25d19ad69da4779f55012095e1c3041055 Mon Sep 17 00:00:00 2001
From: Taloth Saldono <Taloth@users.noreply.github.com>
Date: Sun, 26 Jul 2015 21:37:46 +0200
Subject: [PATCH] Updated spinner visualization.

---
 src/UI/Content/icons.less            | 26 +++++++++++++++++++++++++-
 src/UI/Settings/Quality/quality.less |  2 +-
 src/UI/jQuery/jquery.spin.js         |  8 +++++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/UI/Content/icons.less b/src/UI/Content/icons.less
index a694200e5..6b47430da 100644
--- a/src/UI/Content/icons.less
+++ b/src/UI/Content/icons.less
@@ -72,7 +72,31 @@
 
 .icon-sonarr-spinner {
   .fa-icon-content(@fa-var-spinner);
-  margin: 0px -0.14em;
+}
+
+.fa-spin-overlay {
+  .fa-icon();
+  position         : relative;
+  text-align       : center;
+  vertical-align   : baseline;
+
+  i {
+    opacity        : 0.2;
+
+    &.icon-sonarr-spinner {
+      opacity        : 1.0;
+    }
+  }
+
+  span {
+    position       : absolute;
+    top            : 0;
+    left           : 0;
+    right          : 0;
+    bottom         : 0;
+
+    margin         : 0 -0.5em;
+  }
 }
 
 .icon-sonarr-rename {
diff --git a/src/UI/Settings/Quality/quality.less b/src/UI/Settings/Quality/quality.less
index bd0fb4d16..23732cdfd 100644
--- a/src/UI/Settings/Quality/quality.less
+++ b/src/UI/Settings/Quality/quality.less
@@ -1,5 +1,5 @@
 @import "../../Content/Bootstrap/mixins";
-@import "../../Content/icons";
+@import (reference) "../../Content/icons";
 @import "../../Shared/Styles/clickable.less";
 
 ul.qualities {
diff --git a/src/UI/jQuery/jquery.spin.js b/src/UI/jQuery/jquery.spin.js
index 3875ccbe0..5df52a958 100644
--- a/src/UI/jQuery/jquery.spin.js
+++ b/src/UI/jQuery/jquery.spin.js
@@ -25,7 +25,7 @@ module.exports = function() {
 
         var iconClasses = icon.attr('class').match(/(?:^|\s)icon\-.+?(?:$|\s)/);
 
-        if (iconClasses.length === 0) {
+        if (!iconClasses || iconClasses.length === 0) {
             return this;
         }
 
@@ -38,7 +38,8 @@ module.exports = function() {
         } else {
             icon.attr('data-idle-icon', iconClass);
             icon.removeClass(iconClass);
-            icon.addClass('fa-spin icon-sonarr-spinner');
+            icon.addClass('fa-spin-overlay');
+            icon.html('<i class="' + iconClass + '" /><span><i class="fa-spin icon-sonarr-spinner" /></span>');
         }
 
         return this;
@@ -47,8 +48,9 @@ module.exports = function() {
     $.fn.stopSpin = function() {
         var icon = this.find('i').andSelf('i');
 
+        icon.empty();
         this.removeClass('disabled');
-        icon.removeClass('fa-spin icon-sonarr-spinner');
+        icon.removeClass('fa-spin fa-spin-overlay');
         var idleIcon = icon.attr('data-idle-icon');
 
         if (idleIcon) {