From fb241a43512615f312dddc31b8cd0624a499b354 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 12 Nov 2014 13:37:36 -0500
Subject: [PATCH] UX: Use loading spinner on notifications

---
 .../javascripts/discourse/templates/notifications.hbs |  2 +-
 app/assets/stylesheets/common/base/header.scss        | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/notifications.hbs b/app/assets/javascripts/discourse/templates/notifications.hbs
index 22b92515ccd..05657286406 100644
--- a/app/assets/javascripts/discourse/templates/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/notifications.hbs
@@ -13,6 +13,6 @@
       <div class="none">{{i18n notifications.none}}</div>
     {{/if}}
   {{else}}
-    <div class='loading'><i class='fa fa-spinner fa-spin'></i></div>
+    {{loading-spinner}}
   {{/unless}}
 </section>
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index c6422150d21..43cb539947b 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -222,12 +222,11 @@
     .none {
       padding: 5px;
     }
-    .loading {
-      padding: 10px;
-      display: block;
-      color: scale-color($primary, $lightness: 50%);
-      font-size: 24px;
-      text-align: center;
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      margin: 0 auto;
     }
     /* as a big ol' click target, don't let text inside be selected */
     @include unselectable;