[26152] Add loading indicator for initial relations loading

https://community.openproject.com/wp/26152

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

@@ -34,12 +34,16 @@ export class LoadingIndicator {
 
   constructor(public indicator:JQuery, public element:JQuery) {}
 
-  public set promise(promise:ng.IPromise<any>) {
+  public set promise(promise:Promise<any>) {
     this.start();
-    promise.finally(() => {
+
-      // Delay hiding the indicator a little bit.
+    const stop = () => {
       setTimeout(() => this.stop(), 25);
-    });
+    };
+
+    promise
+      .then(stop)
+      .catch(stop);
   }
 
   public start() {

frontend/app/components/wp-relations/wp-relations.directive.ts

@@ -34,6 +34,7 @@ import {WorkPackageResourceInterface} from '../api/api-v3/hal-resources/work-pac
 import {WorkPackageCacheService} from '../work-packages/work-package-cache.service';
 import {RelatedWorkPackagesGroup} from './wp-relations.interfaces';
 import {RelationsStateValue, WorkPackageRelationsService} from './wp-relations.service';
+import {LoadingIndicatorService} from '../common/loading-indicator/loading-indicator.service';
 
 export class WorkPackageRelationsController {
   public relationGroups:RelatedWorkPackagesGroup;
@@ -48,10 +49,11 @@ export class WorkPackageRelationsController {
               protected $q:ng.IQService,
               protected $state:ng.ui.IState,
               protected I18n:op.I18n,
+              protected loadingIndicator:LoadingIndicatorService,
               protected wpRelations:WorkPackageRelationsService,
               protected wpCacheService:WorkPackageCacheService) {
 
-    this.wpRelations.require(this.workPackage.id, true);
+    loadingIndicator.indicator('relation-groups').promise = this.wpRelations.require(this.workPackage.id, true);
     scopedObservable(this.$scope,
       this.wpRelations.state(this.workPackage.id).values$())
       .subscribe((relations:RelationsStateValue) => {

frontend/app/components/wp-relations/wp-relations.template.html

@@ -1,4 +1,5 @@
-<div>
+<div class="loading-indicator--location"
+     data-indicator-name="relation-groups">
     <div ng-repeat="(type, relatedWorkPackages) in $ctrl.relationGroups">
     <wp-relations-group header="type"
                         group-by-work-package-type="$ctrl.groupByWorkPackageType"

spec/features/work_packages/details/details_relations_spec.rb

@@ -250,6 +250,8 @@ describe 'Work package relations tab', js: true, selenium: true do
         # Save description
         created_row.find('.inplace-edit--control--save a').click
 
+        loading_indicator_saveguard
+
         ## Toggle description again
         relations.hover_action(relatable, :info)
         created_row = relations.find_row(relatable)