From 15e284caa9534a12e2a1b11717937fd78427e183 Mon Sep 17 00:00:00 2001
From: Bryan Cuccioli <blc72@cornell.edu>
Date: Mon, 28 Jan 2013 17:34:59 -0800
Subject: [PATCH] Add loading state to notification menu.

Summary: Notification menu shows a loading message before the menu is populated with the actual response.

Test Plan: Checked by having the function sleep between getting the response and populating the menu.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4696
---
 .../page/menu/PhabricatorMainMenuView.php     |  1 +
 .../application/base/notification-menu.css    |  6 +++++
 .../aphlict/behavior-aphlict-dropdown.js      | 23 +++++++++++++++++--
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/view/page/menu/PhabricatorMainMenuView.php b/src/view/page/menu/PhabricatorMainMenuView.php
index 1283e7d897..73c8ff9789 100644
--- a/src/view/page/menu/PhabricatorMainMenuView.php
+++ b/src/view/page/menu/PhabricatorMainMenuView.php
@@ -390,6 +390,7 @@ final class PhabricatorMainMenuView extends AphrontView {
         'bubbleID'    => $bubble_id,
         'countID'     => $count_id,
         'dropdownID'  => $dropdown_id,
+        'loadingText' => pht('Loading...'),
       ));
 
     $notification_dropdown = javelin_render_tag(
diff --git a/webroot/rsrc/css/application/base/notification-menu.css b/webroot/rsrc/css/application/base/notification-menu.css
index 3782456789..e3766ed4dd 100644
--- a/webroot/rsrc/css/application/base/notification-menu.css
+++ b/webroot/rsrc/css/application/base/notification-menu.css
@@ -9,6 +9,12 @@
   overflow-y: auto;
 }
 
+.phabricator-notification-menu-loading {
+  text-align: center;
+  padding: 10px 0;
+  color: #888888;
+}
+
 .device-desktop .phabricator-notification-menu {
   position: fixed;
   width: 360px;
diff --git a/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js b/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js
index f75fc3b53c..5fd59a0f5f 100644
--- a/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js
+++ b/webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js
@@ -14,8 +14,17 @@ JX.behavior('aphlict-dropdown', function(config) {
   var bubble = JX.$(config.bubbleID);
   var visible = false;
   var request = null;
+  var dirty = true;
 
   function refresh() {
+    if (dirty) {
+      JX.DOM.setContent(dropdown, config.loadingText);
+      JX.DOM.alterClass(
+        dropdown,
+        'phabricator-notification-menu-loading',
+        true);
+    }
+
     if (request) { //already fetching
       return;
     }
@@ -30,6 +39,11 @@ JX.behavior('aphlict-dropdown', function(config) {
       } else {
         JX.DOM.alterClass(bubble, 'alert-unread', true);
       }
+      dirty = false;
+      JX.DOM.alterClass(
+        dropdown,
+        'phabricator-notification-menu-loading',
+        false);
       JX.DOM.setContent(dropdown, JX.$H(response.content));
       request = null;
     });
@@ -74,7 +88,9 @@ JX.behavior('aphlict-dropdown', function(config) {
       if (visible) {
         JX.DOM.hide(dropdown);
       } else {
-        refresh();
+        if (dirty) {
+          refresh();
+        }
 
         var p = JX.$V(bubble);
         p.y = null;
@@ -88,5 +104,8 @@ JX.behavior('aphlict-dropdown', function(config) {
     }
   )
 
-  JX.Stratcom.listen('notification-panel-update', null, refresh);
+  JX.Stratcom.listen('notification-panel-update', null, function() {
+    dirty = true;
+    refresh();
+  });
 });