From 93cff8deb582e5795ec61ac21da4b034e08d3da2 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Fri, 9 May 2014 22:23:27 +0530
Subject: [PATCH] Speech bubble waiting for an ajax response prior to rendering

---
 .../discourse/controllers/header.js.es6       | 19 +++++++++-----
 .../controllers/notifications_controller.js   |  1 +
 .../templates/notifications.js.handlebars     | 26 +++++++++++--------
 app/assets/stylesheets/desktop/header.scss    |  7 +++++
 app/assets/stylesheets/mobile/header.scss     |  7 +++++
 .../controllers/header_controller_test.js     |  2 +-
 .../notifications_controller_test.js          |  4 ++-
 7 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/header.js.es6 b/app/assets/javascripts/discourse/controllers/header.js.es6
index 4bd9934ac..dcfe1ee6d 100644
--- a/app/assets/javascripts/discourse/controllers/header.js.es6
+++ b/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({
   }
 
 });
-
-
diff --git a/app/assets/javascripts/discourse/controllers/notifications_controller.js b/app/assets/javascripts/discourse/controllers/notifications_controller.js
index 1268515f4..3f6738a15 100644
--- a/app/assets/javascripts/discourse/controllers/notifications_controller.js
+++ b/app/assets/javascripts/discourse/controllers/notifications_controller.js
@@ -1,3 +1,4 @@
 Discourse.NotificationsController = Ember.ArrayController.extend(Discourse.HasCurrentUser, {
+  needs: ['header'],
   itemController: "notification"
 });
diff --git a/app/assets/javascripts/discourse/templates/notifications.js.handlebars b/app/assets/javascripts/discourse/templates/notifications.js.handlebars
index 7b06cd115..f86ddcb4d 100644
--- a/app/assets/javascripts/discourse/templates/notifications.js.handlebars
+++ b/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>
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 9947dab4f..4e321e156 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/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
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index c102af15e..762ebe61b 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/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
diff --git a/test/javascripts/controllers/header_controller_test.js b/test/javascripts/controllers/header_controller_test.js
index 73db59ffe..be5b8ca2b 100644
--- a/test/javascripts/controllers/header_controller_test.js
+++ b/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() {
diff --git a/test/javascripts/controllers/notifications_controller_test.js b/test/javascripts/controllers/notifications_controller_test.js
index 045939b76..35aae2268 100644
--- a/test/javascripts/controllers/notifications_controller_test.js
+++ b/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__,