Merge pull request #6950 from IgniteUI/mkirova/fix-6934

fix(igxGrid): Render loading indicator only when needed.

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -190,8 +190,8 @@
         <ng-container *ngTemplateOutlet="template"></ng-container>
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
     </div>
-    <div [style.display]="shouldOverlayLoading ? 'flex' : 'none'" #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true">
+    <div #loadingOverlay>
+        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -72,8 +72,8 @@
         <igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
-    <div [style.display]="shouldOverlayLoading ? 'flex' : 'none'" #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true">
+    <div #loadingOverlay>
+        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -56,8 +56,8 @@
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalSroll()' [style.width.px]="scrollWidth"></div>
-    <div [style.display]="shouldOverlayLoading ? 'flex' : 'none'" #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true">
+    <div #loadingOverlay>
+        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"