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;
 
-      Discourse.ajax("/notifications").then(function(result) {
-        self.set("notifications", result);
-        self.set("currentUser.unread_notifications", 0);
-        headerView.showDropdownBySelector("#user-notifications");
-      });
+      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.setProperties({
+            notifications: result,
+            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,14 +1,18 @@
 <section class="d-dropdown" id="notifications-dropdown">
-  {{#if content}}
-    <ul>
-      {{#each}}
-        <li {{bind-attr class="read"}}>{{unbound boundI18n scope linkBinding="link" usernameBinding="username"}}</li>
-      {{/each}}
-      <li class="read last">
-        <a {{bind-attr href="currentUser.path"}}>{{i18n notifications.more}} &hellip;</a>
-      </li>
-    </ul>
+  {{#unless controllers.header.loading_notifications}}
+    {{#if content}}
+      <ul>
+        {{#each}}
+          <li {{bind-attr class="read"}}>{{unbound boundI18n scope linkBinding="link" usernameBinding="username"}}</li>
+        {{/each}}
+        <li class="read last">
+          <a {{bind-attr href="currentUser.path"}}>{{i18n notifications.more}} &hellip;</a>
+        </li>
+      </ul>
+    {{else}}
+      <div class="none">{{i18n notifications.none}}</div>
+    {{/if}}
   {{else}}
-    <div class="none">{{i18n notifications.none}}</div>
-  {{/if}}
+    <div class='loading'><i class='fa fa-spinner fa-spin'></i></div>
+  {{/unless}}
 </section>