Merge pull request #9113 from IgniteUI/pbozhinov/fix-9073

Fixes isLoading on a not yet loaded row island

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1718,7 +1718,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public set isLoading(value: boolean) {
         if (this._isLoading !== value) {
             this._isLoading = value;
-            this.evaluateLoadingState();
+            if (!!this.data) {
+                this.evaluateLoadingState();
+            }
         }
         Promise.resolve().then(() => {
             // wait for the current detection cycle to end before triggering a new one.

src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html

@@ -13,7 +13,7 @@
     <igx-column field="ContactTitle"></igx-column>
     <igx-column field="Country"></igx-column>
     <igx-column field="Phone"></igx-column>
-    <igx-row-island #rowIsland1 [key]="'Orders'" [isLoading]="true" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (onGridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
+    <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (onGridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
         <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
             <igx-grid-toolbar-title>Child Toolbar - Level {{ grid.parentIsland.level }}</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
@@ -25,7 +25,7 @@
         <igx-column field="ShipCountry"></igx-column>
         <igx-column field="ShipCity"></igx-column>
         <igx-column field="ShipAddress"></igx-column>
-        <igx-row-island #rowIsland2 [key]="'Order_Details'" [isLoading]="true" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowSelection]='selectionMode' (onGridCreated)="gridCreated($event, rowIsland2)" [emptyGridMessage]="''">
+        <igx-row-island #rowIsland2 [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowSelection]='selectionMode' (onGridCreated)="gridCreated($event, rowIsland2)" [emptyGridMessage]="''">
             <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
                 <igx-grid-toolbar-title>Child Toolbar - Level {{ grid.parentIsland.level }}</igx-grid-toolbar-title>
                 <igx-grid-toolbar-actions>

src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.ts

@@ -72,6 +72,7 @@ export class HierarchicalGridRemoteSampleComponent implements AfterViewInit {
     }
 
     public gridCreated(event: IGridCreatedEventArgs, rowIsland: IgxRowIslandComponent) {
+        event.grid.isLoading = true;
         this.remoteService.getData({ parentID: event.parentID, level: rowIsland.level, key: rowIsland.key }, (data) => {
             event.grid.data = data['value'];
             event.grid.isLoading = false;