From 0669575cb845a42edbc045e872f6cd26ee507a7d Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Tue, 20 Jun 2017 18:51:21 +0100
Subject: [PATCH] fix loading state excluding other state during the loading
 (#1991)

---
 .../datatable/datatable.component.html        | 67 ++++++++++---------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index e819ad879f..8828ba883a 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -29,6 +29,7 @@
     </thead>
     <tbody>
 
+    <ng-container *ngIf="!loading">
         <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
             class="alfresco-datatable__row"
             [class.alfresco-datatable__row--selected]="row.isSelected"
@@ -53,38 +54,39 @@
                 </ul>
             </td>
 
-        <td *ngIf="multiselect">
-            <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
-        </td>
-        <td *ngFor="let col of data.getColumns()"
-            class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
-            (click)="onRowClick(row, $event)"
-            [context-menu]="getContextMenuActions(row, col)"
-            [context-menu-enabled]="contextMenu">
-            <div *ngIf="!col.template" class="cell-container">
-                <ng-container [ngSwitch]="col.type">
-                    <div *ngSwitchCase="'image'" class="cell-value">
-                        <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
-                        <img *ngIf="!isIconValue(row, col)"
-                             class="image-cell"
-                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                             src="{{ data.getValue(row, col) }}"
-                             (error)="onImageLoadingError($event)">
-                    </div>
-                    <div *ngSwitchCase="'icon'" class="cell-value">
-                        <img class="image-cell"
-                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                             src="{{ data.getValue(row, col) }}"
-                             (error)="onImageLoadingError($event)">
-                    </div>
-                    <div *ngSwitchCase="'date'" class="cell-value"
-                         [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
-                    </div>
-                    <div *ngSwitchCase="'text'" class="cell-value"
-                         [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
-                    </div>
+            <td *ngIf="multiselect">
+                <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
+            </td>
+            <td *ngFor="let col of data.getColumns()"
+                class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
+                (click)="onRowClick(row, $event)"
+                [context-menu]="getContextMenuActions(row, col)"
+                [context-menu-enabled]="contextMenu">
+                <div *ngIf="!col.template" class="cell-container">
+                    <ng-container [ngSwitch]="col.type">
+                        <div *ngSwitchCase="'image'" class="cell-value">
+                            <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row,
+                                col)}}</i>
+                            <img *ngIf="!isIconValue(row, col)"
+                                 class="image-cell"
+                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                                 src="{{ data.getValue(row, col) }}"
+                                 (error)="onImageLoadingError($event)">
+                        </div>
+                        <div *ngSwitchCase="'icon'" class="cell-value">
+                            <img class="image-cell"
+                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                                 src="{{ data.getValue(row, col) }}"
+                                 (error)="onImageLoadingError($event)">
+                        </div>
+                        <div *ngSwitchCase="'date'" class="cell-value"
+                             [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                        </div>
+                        <div *ngSwitchCase="'text'" class="cell-value"
+                             [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                        </div>
                     <span *ngSwitchDefault class="cell-value">
                     <!-- empty cell for unknown column type -->
                     </span>
@@ -125,6 +127,7 @@
                 </ng-template>
             </td>
         </tr>
+    </ng-container>
     <tr *ngIf="loading">
         <td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
             [attr.colspan]="1 + data.getColumns().length">