From ae3f5078d1bea644234b6fab7370b847b672bc72 Mon Sep 17 00:00:00 2001
From: Infad Kachancheri <infad.k@muraai.com>
Date: Tue, 11 Jul 2017 21:14:09 +0530
Subject: [PATCH] [ADF - 1030] Datatable - enable isLoading to show the spinner
 in all the components (#2063)

* added spinner module and  translate text for process-list component

* added spinner loader for data-table in processlist-variable component

* added spinner loader for data-table in processlist component

* added spinner loader for data-table in process-attachmentlist component

* added spinner module and translate text for tasklist component

* changed css for adf-datatable: selector changed in component

* added spinner loader for data-table in tasklist component

* added spinner loader for data-table in task-attachmentlist component

* removed no-content template from task/process attachment list

* fixed tasklist testcase issues

* changed imort order for test cases

* fixed testcase issue in processlist component
---
 .../ng2-activiti-processlist/index.ts         |  4 ++-
 ...i-process-instance-variables.component.css | 13 ++++++++
 ...-process-instance-variables.component.html | 33 +++++++++++++++----
 ...ocess-instance-variables.component.spec.ts | 18 ++++------
 ...ti-process-instance-variables.component.ts | 11 ++++++-
 .../activiti-processlist.component.css        | 20 +++++++++--
 .../activiti-processlist.component.html       | 24 +++++++++++---
 .../activiti-processlist.component.spec.ts    |  4 ++-
 .../activiti-processlist.component.ts         |  8 +++++
 .../adf-process-attachment-list.component.css | 14 +++-----
 ...adf-process-attachment-list.component.html | 11 +++++++
 ...-process-attachment-list.component.spec.ts | 10 +++---
 .../adf-process-attachment-list.component.ts  |  8 +++++
 ng2-components/ng2-activiti-tasklist/index.ts |  5 +--
 .../components/activiti-people.component.css  | 13 ++++----
 .../activiti-tasklist.component.css           | 14 ++++++++
 .../activiti-tasklist.component.html          | 24 +++++++++++---
 .../activiti-tasklist.component.spec.ts       |  4 ++-
 .../components/activiti-tasklist.component.ts | 10 ++++++
 .../adf-task-attachment-list.component.css    | 14 +++-----
 .../adf-task-attachment-list.component.html   | 11 +++++++
 ...adf-task-attachment-list.component.spec.ts | 11 ++++---
 .../adf-task-attachment-list.component.ts     |  9 +++++
 23 files changed, 224 insertions(+), 69 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.css

diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts
index 022ae38263..076aa001c6 100644
--- a/ng2-components/ng2-activiti-processlist/index.ts
+++ b/ng2-components/ng2-activiti-processlist/index.ts
@@ -20,6 +20,7 @@ import { ActivitiFormModule } from 'ng2-activiti-form';
 import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
+import { MdProgressSpinnerModule } from '@angular/material';
 
 import {
     ActivitiCreateProcessAttachmentComponent,
@@ -75,7 +76,8 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
         CoreModule,
         DataTableModule,
         ActivitiFormModule,
-        ActivitiTaskListModule
+        ActivitiTaskListModule,
+        MdProgressSpinnerModule
     ],
     declarations: [
         ...ACTIVITI_PROCESSLIST_DIRECTIVES
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.css
new file mode 100644
index 0000000000..7f26774b98
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.css
@@ -0,0 +1,13 @@
+.adf-variable-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
+}
+
+.no-content-message {
+    font-family: Muli;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    opacity: 0.54;
+    color: #000;
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html
index 1766131e18..8537495d39 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.html
@@ -4,14 +4,33 @@
 </div>
 
 
-<div *ngIf="!isListEmpty()">
-    <adf-datatable [data]="data" [actions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)"
-                        (executeRowAction)="onExecuteRowAction($event)"></adf-datatable>
+<div>
+    <adf-datatable 
+    [data]="data" 
+    [actions]="true"
+    [loading]="isLoading()"
+    (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    (executeRowAction)="onExecuteRowAction($event)">
+        <loading-content-template>
+            <ng-template>
+                <!--Add your custom loading template here-->
+                <md-progress-spinner
+                    class="adf-variable-list-loading-margin"
+                    [color]="'primary'"
+                    [mode]="'indeterminate'">
+                </md-progress-spinner>
+            </ng-template>
+        </loading-content-template>
+        <no-content-template>
+            <!--Add your custom empty template here-->
+            <ng-template>
+                <div class="no-content-message">
+                    {{ 'DETAILS.VARIABLES.NONE' | translate }}
+                </div>
+            </ng-template>
+        </no-content-template>
+    </adf-datatable>
 </div>
-<div *ngIf="isListEmpty()" data-automation-id="variables-none">
-    {{ 'DETAILS.VARIABLES.NONE' | translate }}
-</div>
-
 
 <dialog class="mdl-dialog add-dialog" #addDialog>
     <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}</h4>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts
index 7637d0c220..c9f344fb22 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.spec.ts
@@ -17,6 +17,7 @@
 
 import { DebugElement, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Rx';
 
@@ -41,7 +42,8 @@ describe('ActivitiProcessInstanceVariables', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule.forRoot()
+                DataTableModule.forRoot(),
+                MdProgressSpinnerModule
             ],
             declarations: [
                 ActivitiProcessInstanceVariables
@@ -98,14 +100,6 @@ describe('ActivitiProcessInstanceVariables', () => {
         expect(getVariablesSpy).not.toHaveBeenCalled();
     });
 
-    it('should not display list when no processInstanceId is specified', fakeAsync(() => {
-        fixture.detectChanges();
-        fixture.whenStable();
-        tick();
-        let datatable: DebugElement = fixture.debugElement.query(By.css('adf-datatable'));
-        expect(datatable).toBeNull();
-    }));
-
     it('should use the default schemaColumn as default', () => {
         fixture.detectChanges();
         expect(component.data.getColumns()).toBeDefined();
@@ -173,8 +167,10 @@ describe('ActivitiProcessInstanceVariables', () => {
 
         it('should set a placeholder message when processInstanceId changed to null', () => {
             component.ngOnChanges({ 'processInstanceId': nullChange });
-            fixture.detectChanges();
-            expect(fixture.debugElement.query(By.css('[data-automation-id="variables-none"]'))).not.toBeNull();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
+            });
         });
     });
 
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts
index 35993e937a..1f71e5580f 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-variables.component.ts
@@ -28,7 +28,7 @@ declare let dialogPolyfill: any;
 @Component({
     selector: 'adf-process-instance-variables, activiti-process-instance-variables',
     templateUrl: './activiti-process-instance-variables.component.html',
-    styleUrls: [],
+    styleUrls: ['./activiti-process-instance-variables.component.css'],
     providers: [ActivitiProcessService]
 })
 export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
@@ -61,6 +61,8 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
     variableValue: string;
     variableScope: string;
 
+    loadingFlag: boolean = true;
+
     /**
      * Constructor
      * @param translate Translation service
@@ -144,13 +146,16 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
 
     private getProcessInstanceVariables(processInstanceId: string) {
         if (processInstanceId) {
+            this.loadingFlag = true;
             this.activitiProcess.getProcessInstanceVariables(processInstanceId).subscribe(
                 (res: ProcessInstanceVariable[]) => {
                     let instancesRow = this.createDataRow(res);
                     this.renderInstances(instancesRow);
+                    this.loadingFlag = false;
                 },
                 (err) => {
                     this.error.emit(err);
+                    this.loadingFlag = false;
                 }
             );
         } else {
@@ -270,4 +275,8 @@ export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
             { id: 'edit', title: 'Edit' }
         ];
     }
+
+    isLoading() {
+        return this.loadingFlag;
+    }
 }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
index ab203a54f0..47491fe0aa 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
@@ -1,15 +1,29 @@
-alfresco-datatable >>> .column-header {
+adf-datatable >>> .column-header {
     color: #232323;
     font-size: 15px;
 }
 
-alfresco-datatable >>> .data-cell {
+adf-datatable >>> .data-cell {
     cursor: pointer !important;
 }
 
-alfresco-datatable >>> .cell-value{
+adf-datatable >>> .cell-value{
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }
+
+.adf-process-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
+}
+
+.no-content-message {
+    font-family: Muli;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    opacity: 0.54;
+    color: #000;
+}
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.html
index 797404ba8c..baef8956f7 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.html
@@ -1,12 +1,28 @@
 <div *ngIf="!requestNode">{{ 'FILTERS.MESSAGES.NONE' | translate }}</div>
 <div *ngIf="requestNode">
-    <div *ngIf="!isListEmpty()">
+    <div>
         <adf-datatable
             [data]="data"
+            [loading]="isLoading()"
             (rowClick)="onRowClick($event)">
+            <loading-content-template>
+                <ng-template>
+                    <!--Add your custom loading template here-->
+                    <md-progress-spinner
+                    class="adf-process-list-loading-margin"
+                    [color]="'primary'"
+                    [mode]="'indeterminate'">
+                    </md-progress-spinner>
+                </ng-template>
+            </loading-content-template>
+            <no-content-template>
+                <!--Add your custom empty template here-->
+                <ng-template>
+                    <div class="no-content-message">
+                        {{ 'PROCESSLIST.NONE' | translate }}
+                    </div>
+                </ng-template>
+            </no-content-template>
         </adf-datatable>
     </div>
-    <div *ngIf="isListEmpty()">
-        {{ 'PROCESSLIST.NONE' | translate }}
-    </div>
 </div>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
index 2678fad0c7..e2da4f41a3 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
@@ -17,6 +17,7 @@
 
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { MdProgressSpinnerModule } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import { ActivitiProcessInstanceListComponent } from './activiti-processlist.component';
 
@@ -39,7 +40,8 @@ describe('ActivitiProcessInstanceListComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule.forRoot()
+                DataTableModule.forRoot(),
+                MdProgressSpinnerModule
             ],
             declarations: [ ActivitiProcessInstanceListComponent ],
             providers: [
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
index 0277088f64..83a605fd8d 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
@@ -62,6 +62,7 @@ export class ActivitiProcessInstanceListComponent implements OnChanges, AfterCon
     onError: EventEmitter<any> = new EventEmitter<any>();
 
     currentInstanceId: string;
+    loadingFlag: boolean = true;
 
     private defaultSchema: DataColumn[] = [
         { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
@@ -140,6 +141,7 @@ export class ActivitiProcessInstanceListComponent implements OnChanges, AfterCon
     }
 
     private load(requestNode: ProcessFilterRequestRepresentation) {
+        this.loadingFlag = true;
         this.processService.getProcessInstances(requestNode)
             .subscribe(
                 (response) => {
@@ -147,9 +149,11 @@ export class ActivitiProcessInstanceListComponent implements OnChanges, AfterCon
                     this.renderInstances(instancesRow);
                     this.selectFirst();
                     this.onSuccess.emit(response);
+                    this.loadingFlag = false;
                 },
                 error => {
                     this.onError.emit(error);
+                    this.loadingFlag = false;
                 });
     }
 
@@ -275,4 +279,8 @@ export class ActivitiProcessInstanceListComponent implements OnChanges, AfterCon
         };
         return new ProcessFilterRequestRepresentation(requestNode);
     }
+
+    isLoading() {
+        return this.loadingFlag;
+    }
 }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.css b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.css
index 170e76fd6c..5d87a966e7 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.css
@@ -1,17 +1,13 @@
-alfresco-datatable >>> .column-header {
+adf-datatable >>> .column-header {
     color: #232323;
     font-size: 15px;
 }
 
-alfresco-datatable >>> .data-cell {
+adf-datatable >>> .data-cell {
     cursor: pointer !important;
 }
 
-.no-attachment-message {
-    border: 1px solid rgb(224, 224, 224);
-    background: #fff;
-    text-align: left;
-    border-top: none;
-    padding: 10px;
-    text-align: center;
+.adf-attachment-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
 }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html
index 0cd731869d..2c8e905216 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html
@@ -1,6 +1,7 @@
 <adf-datatable
     [rows]="attachments"
     [actions]="true"
+    [loading]="isLoading()"
     (rowDblClick)="openContent($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
@@ -10,4 +11,14 @@
         <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
         <data-column key="created" type="date" format="shortDate" title="Created On"></data-column>
     </data-columns>
+    <loading-content-template>
+        <ng-template>
+            <!--Add your custom loading template here-->
+            <md-progress-spinner
+                class="adf-attachment-list-loading-margin"
+                [color]="'primary'"
+                [mode]="'indeterminate'">
+            </md-progress-spinner>
+        </ng-template>
+        </loading-content-template>
 </adf-datatable>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts
index 869c4271b5..82d5159e2d 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts
@@ -17,6 +17,7 @@
 
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivitiContentService } from 'ng2-activiti-form';
@@ -42,7 +43,8 @@ describe('ActivitiProcessAttachmentListComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule.forRoot()
+                DataTableModule.forRoot(),
+                MdProgressSpinnerModule
             ],
             declarations: [
                 ActivitiProcessAttachmentListComponent
@@ -167,14 +169,14 @@ describe('ActivitiProcessAttachmentListComponent', () => {
     }));
 
     it('should show the empty list component when the attachments list is empty', async(() => {
-        component.processInstanceId = '123';
         getProcessRelatedContentSpy.and.returnValue(Observable.of({
             'size': 0,
             'total': 0,
             'start': 0,
             'data': []
         }));
-        fixture.detectChanges();
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'processInstanceId': change});
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER');
@@ -188,7 +190,6 @@ describe('ActivitiProcessAttachmentListComponent', () => {
 
         beforeEach(async(() => {
             component.processInstanceId = '123';
-            fixture.detectChanges();
             fixture.whenStable().then(() => {
                 getProcessRelatedContentSpy.calls.reset();
             });
@@ -214,7 +215,6 @@ describe('ActivitiProcessAttachmentListComponent', () => {
 
         beforeEach(async(() => {
             component.processInstanceId = '123';
-            fixture.detectChanges();
             fixture.whenStable();
         }));
 
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts
index aa6167bb99..e2b3104adb 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts
@@ -39,6 +39,7 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
     error: EventEmitter<any> = new EventEmitter<any>();
 
     attachments: any[] = [];
+    loadingFlag: boolean = true;
 
     constructor(private translateService: AlfrescoTranslationService,
                 private activitiContentService: ActivitiContentService,
@@ -77,6 +78,7 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
     private loadAttachmentsByProcessInstanceId(processInstanceId: string) {
         if (processInstanceId) {
             this.reset();
+            this.loadingFlag = true;
             this.activitiContentService.getProcessRelatedContent(processInstanceId).subscribe(
                 (res: any) => {
                     res.data.forEach(content => {
@@ -89,9 +91,11 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
                         });
                     });
                     this.success.emit(this.attachments);
+                    this.loadingFlag = false;
                 },
                 (err) => {
                     this.error.emit(err);
+                    this.loadingFlag = false;
                 });
         }
     }
@@ -174,4 +178,8 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
             }
         );
     }
+
+    isLoading() {
+        return this.loadingFlag;
+    }
 }
diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts
index 868bf30b46..3ee2627887 100644
--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/index.ts
@@ -17,7 +17,7 @@
 
 import { DatePipe } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { MdButtonModule, MdIconModule, MdInputModule } from '@angular/material';
+import { MdButtonModule, MdIconModule, MdInputModule, MdProgressSpinnerModule } from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -80,7 +80,8 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         ActivitiFormModule,
         MdIconModule,
         MdButtonModule,
-        MdInputModule
+        MdInputModule,
+        MdProgressSpinnerModule
     ],
     declarations: [
         ...ACTIVITI_TASKLIST_DIRECTIVES
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css
index 3d94acb9f2..704f7abcc6 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css
@@ -38,26 +38,27 @@
 
 .assignment-list-container {
     padding: 0px;
+    width: 100%;
 }
 
-adf-people-list >>> alfresco-datatable >>> thead {
+adf-people-list >>> adf-datatable >>> thead {
     display: none;
 }
 
-adf-people-list >>> alfresco-datatable >>> .people-full-name {
+adf-people-list >>> adf-datatable >>> .people-full-name {
     font-family: 'Muli';
 }
 
-adf-people-list >>> alfresco-datatable >>> .people-email {
+adf-people-list >>> adf-datatable >>> .people-email {
     font-family: 'Muli';
     opacity: 0.54;
 }
 
-adf-people-list >>> alfresco-datatable >>> .people-edit-label {
+adf-people-list >>> adf-datatable >>> .people-edit-label {
     font-family: 'Muli';
 }
 
-adf-people-list >>> alfresco-datatable >>> .people-pic {
+adf-people-list >>> adf-datatable >>> .people-pic {
     background: #ffc800;
     padding: 12px 10px;
     border-radius: 100px;
@@ -69,6 +70,6 @@ adf-people-list >>> alfresco-datatable >>> .people-pic {
     text-transform: uppercase
 }
 
-adf-people-list >>> alfresco-datatable >>> td.mdl-data-table__cell--non-numeric.non-selectable.data-cell{
+adf-people-list >>> adf-datatable >>> td.mdl-data-table__cell--non-numeric.non-selectable.data-cell{
     padding: 10px;
 }
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
index ab203a54f0..28946f5927 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
@@ -13,3 +13,17 @@ alfresco-datatable >>> .cell-value{
     overflow: hidden;
     text-overflow: ellipsis
 }
+
+.adf-task-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
+}
+
+.no-content-message {
+    font-family: Muli;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    opacity: 0.54;
+    color: #000;
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
index b71b2d9078..e524993576 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
@@ -1,12 +1,28 @@
 <div *ngIf="!requestNode">{{ 'TASK_FILTERS.MESSAGES.NONE' | translate }}</div>
 <div *ngIf="requestNode">
-    <div *ngIf="!isListEmpty()">
+    <div>
         <adf-datatable
             [data]="data"
+            [loading]="isLoading()"
             (rowClick)="onRowClick($event)">
+            <loading-content-template>
+                <ng-template>
+                    <!--Add your custom loading template here-->
+                    <md-progress-spinner
+                    class="adf-task-list-loading-margin"
+                    [color]="'primary'"
+                    [mode]="'indeterminate'">
+                    </md-progress-spinner>
+                </ng-template>
+            </loading-content-template>
+            <no-content-template>
+                <!--Add your custom empty template here-->
+                <ng-template>
+                    <div class="no-content-message">
+                        {{ 'TASK_LIST.MESSAGES.NONE' | translate }}
+                    </div>
+                </ng-template>
+            </no-content-template>
         </adf-datatable>
     </div>
-    <div *ngIf="isListEmpty()">
-        {{ 'TASK_LIST.MESSAGES.NONE' | translate }}
-    </div>
 </div>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index 3a31825308..3f4610638c 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -17,6 +17,7 @@
 
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdProgressSpinnerModule } from '@angular/material';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { DataRowEvent, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
@@ -87,7 +88,8 @@ describe('ActivitiTaskList', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule
+                DataTableModule,
+                MdProgressSpinnerModule
             ],
             declarations: [
                 ActivitiTaskList
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
index 51e889e539..cc68b39373 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
@@ -82,6 +82,8 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
 
     currentInstanceId: string;
 
+    loadingFlag: boolean = true;
+
     /**
      * Toggles custom data source mode.
      * When enabled the component reloads data from it's current source instead of the server side.
@@ -180,6 +182,7 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
     }
 
     private load(requestNode: TaskQueryRequestRepresentationModel) {
+        this.loadingFlag = true;
         this.taskListService.getTotalTasks(requestNode).subscribe(
             (res) => {
                 requestNode.size = res.total;
@@ -189,11 +192,14 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
                         this.renderInstances(instancesRow);
                         this.selectTask(requestNode.landingTaskId);
                         this.onSuccess.emit(response);
+                        this.loadingFlag = false;
                     }, (error) => {
                         this.onError.emit(error);
+                        this.loadingFlag = false;
                     });
             }, (err) => {
                 this.onError.emit(err);
+                this.loadingFlag = false;
             });
     }
 
@@ -300,4 +306,8 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
         };
         return new TaskQueryRequestRepresentationModel(requestNode);
     }
+
+    isLoading() {
+        return this.loadingFlag;
+    }
 }
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css
index 908e599c81..88e06d2740 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.css
@@ -1,17 +1,13 @@
-alfresco-datatable >>> .column-header {
+adf-datatable >>> .column-header {
     color: #232323;
     font-size: 15px;
 }
 
-alfresco-datatable >>> .data-cell {
+adf-datatable >>> .data-cell {
     cursor: pointer !important;
 }
 
-.no-attachment-message {
-    border: 1px solid rgb(224, 224, 224);
-    background: #fff;
-    text-align: left;
-    border-top: none;
-    padding: 10px;
-    text-align: center;
+.adf-attachment-list-loading-margin {
+    margin-left: calc((100% - 100px) / 2);
+    margin-right: calc((100% - 100px) / 2);
 }
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
index 505b36183c..7ce9ce48ae 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
@@ -1,6 +1,7 @@
 <adf-datatable
     [rows]="attachments"
     [actions]="true"
+    [loading]="isLoading()"
     (rowDblClick)="openContent($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
@@ -10,4 +11,14 @@
         <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
         <data-column key="created" type="date" format="shortDate" title="Date"></data-column>
     </data-columns>
+    <loading-content-template>
+        <ng-template>
+            <!--Add your custom loading template here-->
+            <md-progress-spinner
+                class="adf-attachment-list-loading-margin"
+                [color]="'primary'"
+                [mode]="'indeterminate'">
+            </md-progress-spinner>
+        </ng-template>
+    </loading-content-template>
 </adf-datatable>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
index db00745c06..3207c54747 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
@@ -17,6 +17,7 @@
 
 import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivitiContentService } from 'ng2-activiti-form';
@@ -42,7 +43,8 @@ describe('TaskAttachmentList', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule.forRoot()
+                DataTableModule.forRoot(),
+                MdProgressSpinnerModule
             ],
             declarations: [
                 TaskAttachmentListComponent
@@ -163,14 +165,15 @@ describe('TaskAttachmentList', () => {
     }));
 
     it('should show the empty list component when the attachments list is empty', async(() => {
-        component.taskId = '123';
         getTaskRelatedContentSpy.and.returnValue(Observable.of({
             'size': 0,
             'total': 0,
             'start': 0,
             'data': []
         }));
-        fixture.detectChanges();
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'taskId': change});
+
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER');
@@ -184,7 +187,6 @@ describe('TaskAttachmentList', () => {
 
         beforeEach(async(() => {
             component.taskId = '123';
-            fixture.detectChanges();
             fixture.whenStable().then(() => {
                 getTaskRelatedContentSpy.calls.reset();
             });
@@ -210,7 +212,6 @@ describe('TaskAttachmentList', () => {
 
         beforeEach(async(() => {
             component.taskId = '123';
-            fixture.detectChanges();
             fixture.whenStable();
         }));
 
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts
index ebb6961688..78930a9033 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts
@@ -39,6 +39,7 @@ export class TaskAttachmentListComponent implements OnChanges {
     error: EventEmitter<any> = new EventEmitter<any>();
 
     attachments: any[] = [];
+    loadingFlag: boolean = true;
 
     constructor(private translateService: AlfrescoTranslationService,
                 private activitiContentService: ActivitiContentService,
@@ -76,6 +77,8 @@ export class TaskAttachmentListComponent implements OnChanges {
 
     private loadAttachmentsByTaskId(taskId: string) {
         if (taskId) {
+            this.loadingFlag = true;
+            this.reset();
             this.activitiContentService.getTaskRelatedContent(taskId).subscribe(
                 (res: any) => {
                     let attachList = [];
@@ -90,9 +93,11 @@ export class TaskAttachmentListComponent implements OnChanges {
                     });
                     this.attachments = attachList;
                     this.success.emit(this.attachments);
+                    this.loadingFlag = false;
                 },
                 (err) => {
                     this.error.emit(err);
+                    this.loadingFlag = false;
                 });
         }
     }
@@ -175,4 +180,8 @@ export class TaskAttachmentListComponent implements OnChanges {
             }
         );
     }
+
+    isLoading() {
+        return this.loadingFlag;
+    }
 }