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

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(

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;

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();
+  });
 });