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