From c676b2012d98e99321e2c526b2ec84f76299fb75 Mon Sep 17 00:00:00 2001
From: siva kumar <siva.kumar@muraai.com>
Date: Wed, 4 Nov 2020 14:36:24 +0530
Subject: [PATCH] [ACA-4071] [ADW-Cloud]Task header takes too much to be loaded
 after claiming a task (#6294)

* [ACA-4071] [ADW-Cloud]Task header takes too much to be loaded after claiming a task

* * Fixed comment

* * Fixed comment
---
 .../components/task-header-cloud.component.html       |  2 +-
 .../components/task-header-cloud.component.spec.ts    |  4 ++--
 .../components/task-header-cloud.component.ts         | 11 ++++++++---
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
index 53bad84f0a..0a85962451 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
@@ -4,7 +4,7 @@
     <mat-card *ngIf="isTaskValid()" class="adf-card-container">
         <mat-card-content>
             <adf-card-view
-                *ngIf="properties; else loadingTemplate"
+                *ngIf="!isLoading; else loadingTemplate"
                 [properties]="properties"
                 [editable]="isTaskEditable()"
                 [displayClearAction]="displayDateClearAction">
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
index 6c5e6ade61..5dfa9710f3 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
@@ -210,8 +210,8 @@ describe('TaskHeaderCloudComponent', () => {
             expect(taskCloudService.updateTask).toHaveBeenCalled();
         }));
 
-        it('should show loading spinner when properties are not loaded', () => {
-            component.properties = null;
+        it('should show spinner before loading task details', () => {
+            component.isLoading = true;
             fixture.detectChanges();
             const loading = fixture.debugElement.query(By.css('.adf-task-header-loading'));
             expect(loading).toBeTruthy();
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
index d8c3274176..ea14c27cd9 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, Input, EventEmitter, Output, OnDestroy, OnChanges, OnInit } from '@angular/core';
-import { takeUntil, concatMap, catchError } from 'rxjs/operators';
+import { takeUntil, concatMap, catchError, finalize } from 'rxjs/operators';
 import { Subject, of, forkJoin } from 'rxjs';
 import {
     CardViewDateItemModel,
@@ -76,6 +76,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
     dateTimeFormat: string;
     dateLocale: string;
     displayDateClearAction = false;
+    isLoading = true;
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -113,6 +114,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
     }
 
     loadTaskDetailsById(appName: string, taskId: string) {
+        this.isLoading = true;
         this.taskCloudService.getTaskById(appName, taskId).pipe(
             concatMap((task) =>
                 forkJoin(
@@ -120,7 +122,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     this.taskCloudService.getCandidateUsers(this.appName, this.taskId),
                     this.taskCloudService.getCandidateGroups(this.appName, this.taskId)
                 )
-            )
+            ),
+            finalize(() => (this.isLoading = false))
         ).subscribe(([taskDetails, candidateUsers, candidateGroups]) => {
                 this.taskDetails = taskDetails;
                 this.candidateGroups = candidateGroups.map((user) => <CardViewArrayItem> { icon: 'group', value: user });
@@ -131,7 +134,9 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     this.refreshData();
                 }
             },
-            (err) => this.error.emit(err));
+            (err) => {
+                this.error.emit(err);
+            });
     }
 
     private initDefaultProperties() {