Implement new non-digest based loadingIndicator

app/assets/stylesheets/content/_loading_indicator.lsg

@@ -0,0 +1,14 @@
+# Loading indicator
+
+<div class="loading-indicator">
+  <div class="block-1"></div>
+  <div class="block-2"></div>
+  <div class="block-3"></div>
+  <div class="block-4"></div>
+  <div class="block-5"></div>
+</div>
+
+
+<div class="loading-indicator--background">
+
+</div>

app/assets/stylesheets/content/_loading_indicator.sass

@@ -0,0 +1,62 @@
+
+// Based on spinkit by Tobias Ahlin.
+//
+// The MIT License (MIT)
+// Copyright (c) 2015 Tobias Ahlin
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+.loading-indicator--background
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background: $loading-indicator-bg-color
+  opacity: $loading-indicator-bg-opacity
+  z-index: 1000
+
+.loading-indicator
+  margin: 80px auto
+  width: 100px
+  height: 50px
+  text-align: center
+  font-size: 10px
+
+  [class^='block-']
+    background-color: $loading-indicator-spinner-color
+    height: 100%
+    width: 6px
+    display: inline-block
+    animation: block-waveStretchDelay 1.2s infinite ease-in-out
+  .block-1
+    animation-delay: -1.2s
+  .block-2
+    animation-delay: -1.1s
+  .block-3
+    animation-delay: -1s
+  .block-4
+    animation-delay: -0.9s
+  .block-5
+    animation-delay: -0.8s
+
+@keyframes block-waveStretchDelay
+  0%, 40%, 100%
+    transform: scaleY(0.4)
+  20%
+    transform: scaleY(1)

app/assets/stylesheets/default.css.sass

@@ -77,6 +77,7 @@
 @import content/information_section
 @import content/widget_box
 @import content/list
+@import content/loading_indicator
 
 @import content/work_packages
 

app/assets/stylesheets/layout/_work_package.sass

@@ -105,6 +105,7 @@
   overflow-x: auto
 
 .work-packages--list-table-area
+  position: relative // required for loading indicator
   height: calc(100% - 55px)
 
   table

app/assets/stylesheets/layout/_work_package_mobile.sass

@@ -44,9 +44,6 @@
         height: 100% !important
         overflow: visible
 
-      .work-packages--list-table-area
-        position: relative
-
       .work-packages--list
         padding-bottom: 55px
 

app/assets/stylesheets/open_project_global/_variables.sass

@@ -219,3 +219,8 @@ $table-row-border-color:                        #E7E7E7 !default
 $table-row-highlighting-color:                  #e4f7fb !default
 $table-header-border-color:                     #D7D7D7 !default
 $table-header-shadow-color:                     #DDDDDD !default
+
+
+$loading-indicator-bg-color:                    $body-background !default
+$loading-indicator-bg-opacity:                  0.8 !default
+$loading-indicator-spinner-color:               $primary-color !default

frontend/app/components/common/loading-indicator/loading-indicator.service.ts

@@ -26,12 +26,63 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-/**
- * An object holding promises for page load indication for cg-busy.
- *
- * @see https://github.com/cgross/angular-busy/
- */
-
-angular
-  .module('openproject.workPackages.services')
-  .value('loadingIndicator', {});
+export const indicatorLocationSelector = '.loading-indicator--location';
+export const indicatorBackgroundSelector = '.loading-indicator--background';
+
+export class LoadingIndicator {
+
+  constructor(public indicator:JQuery, public element:JQuery) {}
+
+  public set promise(promise:ng.IPromise<any>) {
+    this.start();
+    promise.finally(() => {
+      this.stop();
+    });
+  }
+
+  public start() {
+    this.indicator.prepend(this.element);
+  }
+
+  public stop() {
+    this.indicator.find(indicatorBackgroundSelector).remove();
+  }
+}
+
+export class LoadingIndicatorService {
+
+  private indicatorTemplate;
+  constructor() {
+    this.indicatorTemplate = `
+      <div class="loading-indicator--background">
+        <div class="loading-indicator">
+          <div class="block-1"></div>
+          <div class="block-2"></div> 
+          <div class="block-3"></div>
+          <div class="block-4"></div> 
+          <div class="block-5"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  // Provide a shortcut to the primarily used indicator
+  // (aka mainPage)
+  public get table() {
+    return this.indicator('table');
+  }
+
+  // Return an indicator by name
+  public indicator(name:string):LoadingIndicator {
+    let indicator = this.getIndicatorAt(name);
+    return new LoadingIndicator(indicator, jQuery(this.indicatorTemplate));
+  }
+
+  private getIndicatorAt(name:string):JQuery {
+    return jQuery(indicatorLocationSelector).filter(`[data-indicator-name="${name}"`);
+  }
+}
+
+
+import {opServicesModule} from '../../../angular-modules';
+opServicesModule.service('loadingIndicator', LoadingIndicatorService);

frontend/app/components/routing/wp-list/wp-list.controller.ts

@@ -32,6 +32,7 @@ import {ErrorResource} from '../../api/api-v3/hal-resources/error-resource.servi
 import {States} from '../../states.service';
 import {WorkPackageTableColumnsService} from '../../wp-fast-table/state/wp-table-columns.service';
 import { Observable } from 'rxjs/Observable';
+import {LoadingIndicatorService} from '../../common/loading-indicator/loading-indicator.service';
 
 function WorkPackagesListController($scope,
                                     $rootScope,
@@ -50,11 +51,10 @@ function WorkPackagesListController($scope,
                                     AuthorisationService,
                                     UrlParamsHelper,
                                     OPERATORS_AND_LABELS_BY_FILTER_TYPE,
-                                    loadingIndicator,
+                                    loadingIndicator:LoadingIndicatorService,
                                     I18n) {
 
   $scope.projectIdentifier = $state.params.projectPath || null;
-  $scope.loadingIndicator = loadingIndicator;
   $scope.I18n = I18n;
   $scope.text = {
     'jump_to_pagination': I18n.t('js.work_packages.jump_marks.pagination'),
@@ -68,7 +68,7 @@ function WorkPackagesListController($scope,
     $scope.disableNewWorkPackage = true;
     $scope.queryError = false;
 
-    loadingIndicator.mainPage = wpListService.fromQueryParams($state.params, $scope.projectIdentifier)
+    loadingIndicator.table.promise = wpListService.fromQueryParams($state.params, $scope.projectIdentifier)
       .then((json:api.ex.WorkPackagesMeta) => {
 
         // Update work package states
@@ -199,7 +199,7 @@ function WorkPackagesListController($scope,
   };
 
   $scope.loadQuery = function (queryId) {
-    loadingIndicator.mainPage = $state.go('work-packages.list',
+    loadingIndicator.table.promise= $state.go('work-packages.list',
       {'query_id': queryId,
        'query_props': null});
   };
@@ -207,7 +207,7 @@ function WorkPackagesListController($scope,
   function updateResults() {
     $scope.$broadcast('openproject.workPackages.updateResults');
 
-    loadingIndicator.mainPage = wpListService.fromQueryInstance($scope.query, $scope.projectIdentifier)
+    loadingIndicator.table.promise = wpListService.fromQueryInstance($scope.query, $scope.projectIdentifier)
       .then(function (json:api.ex.WorkPackagesMeta) {
         wpCacheService.updateWorkPackageList(json.work_packages);
         setupWorkPackagesTable(json);
@@ -260,7 +260,7 @@ function WorkPackagesListController($scope,
         workPackageId: id
       }
 
-      loadingIndicator.mainPage = $state.go(
+      loadingIndicator.table.promise = $state.go(
         'work-packages.show',
         angular.extend($state.params, params)
       );

frontend/app/components/routing/wp-list/wp.list.html

@@ -69,10 +69,9 @@
     <span ng-bind="::text.jump_to_pagination"></span>
   </accessible-by-keyboard>
 
-  <div class="work-packages--list"
-       cg-busy="{promise: loadingIndicator.mainPage, message: I18n.t('js.label_please_wait')}">
-
-    <div class="work-packages--list-table-area">
+  <div class="work-packages--list">
+    <div class="work-packages--list-table-area loading-indicator--location"
+         data-indicator-name="table">
       <wp-table ng-if="columns"
                 project-identifier="projectIdentifier"
                 columns="columns"