Merge pull request #8624 from IgniteUI/ibarakov/fix-8602-9.1.x

fix(grid-filtering): prevent page hanging when using remote data

Author: DiyanDimitrov

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

@@ -1447,8 +1447,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ViewChild('loadingOverlay', { static: true })
-    public loadingOverlay: ElementRef;
+    @ViewChild('loadingOverlay', { read: IgxToggleDirective, static: true })
+    public loadingOverlay: IgxToggleDirective;
 
     /**
      * @hidden @internal
@@ -1959,7 +1959,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ViewChild(IgxToggleDirective)
+    @ViewChild('rowEditingOverlay', { read: IgxToggleDirective })
     public rowEditingOverlay: IgxToggleDirective;
 
     /**
@@ -2596,7 +2596,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _baseFontSize: number;
     private _horizontalForOfs: Array<IgxGridForOfDirective<any>> = [];
     private _multiRowLayoutRowSize = 1;
-    protected _loadingId;
     protected _expansionStates: Map<any, boolean> = new Map<any, boolean>();
     protected _defaultExpandState = false;
     // Caches
@@ -6205,15 +6204,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 closeOnOutsideClick: false,
                 positionStrategy: new ContainerPositionStrategy()
             };
-            if (!this._loadingId) {
-                this._loadingId = this.overlayService.attach(this.loadingOverlay, overlaySettings);
-                this.overlayService.show(this._loadingId, overlaySettings);
-            }
+
+            this.loadingOverlay.open(overlaySettings);
         } else {
-            if (this._loadingId) {
-                this.overlayService.hide(this._loadingId);
-                this._loadingId = null;
-            }
+            this.loadingOverlay.close();
         }
     }
 

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

@@ -195,7 +195,7 @@
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
         <igc-trial-watermark></igc-trial-watermark>
     </div>
-    <div #loadingOverlay>
+    <div igxToggle #loadingOverlay>
         <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
@@ -279,7 +279,7 @@
 }">unfold_more</igx-icon>
 </ng-template>
 
-<div *ngIf="rowEditable" igxToggle>
+<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
             *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }">

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

@@ -73,7 +73,7 @@
         <igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
-    <div #loadingOverlay>
+    <div igxToggle #loadingOverlay>
         <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
@@ -227,7 +227,7 @@
     <igx-icon role="button" [isActive]='hasExpandedRecords() && hasExpandableChildren' fontSet="material">unfold_less</igx-icon>
 </ng-template>
 
-<div *ngIf="rowEditable" igxToggle>
+<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
             *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }">

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

@@ -56,7 +56,7 @@
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
-    <div #loadingOverlay>
+    <div igxToggle #loadingOverlay>
         <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
@@ -194,7 +194,7 @@
     </div>
 </ng-template>
 
-<div *ngIf="rowEditable" igxToggle>
+<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
             *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }">