Speech bubble waiting for an ajax response prior to rendering

app/assets/javascripts/discourse/controllers/header.js.es6

@@ -10,6 +10,7 @@ export default Discourse.Controller.extend({
   topic: null,
   showExtraInfo: null,
   notifications: null,
+  loading_notifications: null,
 
   showStarButton: function() {
     return Discourse.User.current() && !this.get('topic.isPrivateMessage');
@@ -25,11 +26,17 @@ export default Discourse.Controller.extend({
     showNotifications: function(headerView) {
       var self = this;
 
+      if (self.get('currentUser.unread_notifications') || self.get('currentUser.unread_private_messages') || !self.get('notifications')) {
+        self.set("loading_notifications", true);
         Discourse.ajax("/notifications").then(function(result) {
-        self.set("notifications", result);
+          self.setProperties({
-        self.set("currentUser.unread_notifications", 0);
+            notifications: result,
-        headerView.showDropdownBySelector("#user-notifications");
+            loading_notifications: false,
+            'currentUser.unread_notifications': 0
           });
+        });
+      }
+      headerView.showDropdownBySelector("#user-notifications");
     },
 
     jumpToTopPost: function () {
@@ -41,5 +48,3 @@ export default Discourse.Controller.extend({
   }
 
 });
-
-

app/assets/javascripts/discourse/controllers/notifications_controller.js

@@ -1,3 +1,4 @@
 Discourse.NotificationsController = Ember.ArrayController.extend(Discourse.HasCurrentUser, {
+  needs: ['header'],
   itemController: "notification"
 });

app/assets/javascripts/discourse/templates/notifications.js.handlebars

@@ -1,4 +1,5 @@
 <section class="d-dropdown" id="notifications-dropdown">
+  {{#unless controllers.header.loading_notifications}}
     {{#if content}}
       <ul>
         {{#each}}
@@ -11,4 +12,7 @@
     {{else}}
       <div class="none">{{i18n notifications.none}}</div>
     {{/if}}
+  {{else}}
+    <div class='loading'><i class='fa fa-spinner fa-spin'></i></div>
+  {{/unless}}
 </section>

app/assets/stylesheets/desktop/header.scss

@@ -204,6 +204,13 @@
     .none {
       padding: 5px;
     }
+    .loading {
+      padding: 10px;
+      display: block;
+      color: scale-color($primary, $lightness: 50%);
+      font-size: 24px;
+      text-align: center;
+    }
   }
 
   // Search

app/assets/stylesheets/mobile/header.scss

@@ -194,6 +194,13 @@
     .none {
       padding: 5px;
     }
+    .loading {
+      padding: 10px;
+      display: block;
+      color: #777;
+      font-size: 24px;
+      text-align: center;
+    }
   }
 
   // Search

test/javascripts/controllers/header_controller_test.js

@@ -23,7 +23,7 @@ test("showNotifications action", function() {
 
   equal(controller.get("notifications"), null, "notifications are null before data has finished loading");
   equal(Discourse.User.current().get("unread_notifications"), 1, "current user's unread notifications count is not zeroed before data has finished loading");
-  ok(viewSpy.showDropdownBySelector.notCalled, "dropdown with notifications is not shown before data has finished loading");
+  ok(viewSpy.showDropdownBySelector.calledWith("#user-notifications"), "dropdown with loading glyph is shown before data has finished loading");
 
 
   Ember.run(function() {

test/javascripts/controllers/notifications_controller_test.js

@@ -17,7 +17,9 @@ module("Discourse.NotificationsController", {
       return [scope, options.username, options.link].join(" ").trim();
     });
 
-    controller = Discourse.NotificationsController.create();
+    controller = Discourse.NotificationsController.create({
+      container: Discourse.__container__
+    });
 
     view = Ember.View.create({
       container: Discourse.__container__,