(js) Progress indicator for event/task lists

NEWS

@@ -12,6 +12,7 @@ Enhancements
  - [web] removed animation when dragging an event to speed up rendering
  - [web] expunge drafts mailbox when a draft is sent and deleted
  - [web] actions of Sieve filters are now sortable
+ - [web] show progress indicator when refreshing events/tasks lists
 
 Bug fixes
  - [web] fixed refresh of addressbook when deleting one or many cards

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -660,6 +660,12 @@
             </md-tab>
           </md-tabs>
         </md-content>
+        <div class="sg-progress-circular-floating"
+             ng-show="list.component.$isLoading()">
+          <md-progress-circular class="md-accent"
+                                md-mode="indeterminate"
+                                md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
+        </div>
         <md-fab-speed-dial
              class="md-fling md-fab-bottom-right"
              md-direction="up" md-open="false"

UI/WebServerResources/js/Scheduler/Component.service.js

@@ -31,8 +31,9 @@
    * @desc The factory we'll use to register with Angular
    * @returns the Component constructor
    */
-  Component.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'Preferences', 'Card', 'Gravatar', 'Resource', function($q, $timeout, $log, Settings, Preferences, Card, Gravatar, Resource) {
+  Component.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgComponent_STATUS', 'Preferences', 'Card', 'Gravatar', 'Resource', function($q, $timeout, $log, Settings, Component_STATUS, Preferences, Card, Gravatar, Resource) {
     angular.extend(Component, {
+      STATUS: Component_STATUS,
       $q: $q,
       $timeout: $timeout,
       $log: $log,
@@ -87,6 +88,13 @@
     angular.module('SOGo.SchedulerUI', ['SOGo.Common']);
   }
   angular.module('SOGo.SchedulerUI')
+    .constant('sgComponent_STATUS', {
+      NOT_LOADED:      0,
+      DELAYED_LOADING: 1,
+      LOADING:         2,
+      LOADED:          3,
+      DELAYED_MS:      300
+    })
     .factory('Component', Component.$factory);
 
   /**
@@ -129,6 +137,16 @@
     });
   };
 
+  /**
+   * @function $isLoading
+   * @memberof Component
+   * @returns true if the components list is still being retrieved from server after a specific delay
+   * @see sgMessage_STATUS
+   */
+  Component.$isLoading = function() {
+    return Component.$loaded == Component.STATUS.LOADING;
+  };
+
   /**
    * @function $filter
    * @memberof Component
@@ -398,6 +416,13 @@
     var _this = this,
         components = [];
 
+    // Components list is not loaded yet
+    Component.$loaded = Component.STATUS.DELAYED_LOADING;
+    Component.$timeout(function() {
+      if (Component.$loaded != Component.STATUS.LOADED)
+        Component.$loaded = Component.STATUS.LOADING;
+    }, Component.STATUS.DELAYED_MS);
+
     return futureComponentData.then(function(data) {
       return Component.$timeout(function() {
         var fields = _.invokeMap(data.fields, 'toLowerCase');
@@ -422,6 +447,8 @@
         // Save the list of components to the object model
         Component['$' + type] = components;
 
+        Component.$loaded = Component.STATUS.LOADED;
+
         return components;
       });
     });

UI/WebServerResources/scss/components/progressCircular/progress-circular.scss

@@ -15,6 +15,7 @@
   border-radius: 50%;
   padding: $baseline-grid/2;
   box-shadow: $whiteframe-shadow-3dp;
+  z-index: $z-index-view;
   md-progress-circular {
     display: block;
   }