igxGrid - changing isLoading to not depend on data state (#5777)

* feat(grid): add overlay loading logic for flat grid #5517

* chore(*): some additions to impl

* chore(*): fixing most things

* chore(*): finalizing changes in code

* test(*): changing tests to match new behavior #5517

Author: ChronosSF

CHANGELOG.md

@@ -76,6 +76,7 @@ For more information about the theming please read our [documentation](https://w
     - **Breaking Change** `onRowSelectionChange` event arguments are changed. The `row` property has been removed and the properties `added`, `removed` and `cancel` are newly added.
     - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
     - **Breaking Change** `onRowDragEnd` and `onRowDragStart` event arguments are changed - `owner` now holds reference to the grid component instance, while `dragDirective` hold reference to the drag directive.
+    - **Behavioral Change** The behavior of the `isLoading` input no longer depends on the state of the data the grid binds to. Setting it to `true` now shows a loading indicator until it is disabled by the user.
 - `IgxCombo`
     - Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:
     ```html

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -431,6 +431,10 @@
         @extend %igx-grid__outlet !optional;
     }
 
+    @include e(loading-outlet) {
+        @extend %igx-grid__loading-outlet !optional;
+    }
+
     @include e(row-editing-outlet) {
         @extend %igx-grid__row-editing-outlet !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1992,6 +1992,15 @@
         position: fixed;
     }
 
+    %igx-grid__loading-outlet {
+        z-index: 10003;
+
+        %circular-display {
+            width: rem(50);
+            height: rem(50);
+        }
+    }
+
     %igx-grid__row-editing-outlet {
         z-index: 10000;
         position: absolute;

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts

@@ -1010,7 +1010,7 @@ describe('igxExpansionPanel', () => {
             expect(grid.attributes.getNamedItem('ng-reflect-auto-generate').nodeValue).toEqual('true');
             expect(grid.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(fixture.componentInstance.width);
             expect(grid.attributes.getNamedItem('ng-reflect-height').nodeValue).toEqual(fixture.componentInstance.height);
-            expect(grid.childElementCount).toEqual(6);
+            expect(grid.childElementCount).toEqual(7);
         }));
         it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {
             const fixture: ComponentFixture<IgxExpansionPanelImageComponent> = TestBed.createComponent(IgxExpansionPanelImageComponent);

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

@@ -46,7 +46,8 @@ import {
     IgxOverlayService,
     OverlaySettings,
     PositionSettings,
-    ConnectedPositioningStrategy
+    ConnectedPositioningStrategy,
+    ContainerPositionStrategy
 } from '../services/index';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
@@ -845,9 +846,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * ```
 	 * @memberof IgxGridBaseComponent
      */
+    @WatchChanges()
     @Input()
     set isLoading(value: boolean) {
-        this._isLoading = value;
+        if (this._isLoading !== value) {
+            this._isLoading = value;
+            this.evaluateLoadingState();
+        }
         this.notifyChanges();
     }
 
@@ -1650,6 +1655,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ViewChild(IgxGridColumnResizerComponent, { static: false })
     public resizeLine: IgxGridColumnResizerComponent;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('loadingOverlay', { static: true })
+    public loadingOverlay: ElementRef;
+
+    /**
+     * @hidden
+     */
+    @ViewChild('igxLoadingOverlayOutlet', { read: IgxOverlayOutletDirective, static: true })
+    public loadingOutlet: IgxOverlayOutletDirective;
+
     /**
      * @hidden
      */
@@ -2728,6 +2745,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     protected _baseFontSize: number;
     private _horizontalForOfs: Array<IgxGridForOfDirective<any>> = [];
     private _multiRowLayoutRowSize = 1;
+    protected _loadingId;
 
     // Caches
     private _totalWidth = NaN;
@@ -2927,6 +2945,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.verticalScrollContainer.onDataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
             this.calculateGridHeight();
             $event.containerSize = this.calcHeight;
+            this.evaluateLoadingState();
             this.notifyChanges(true);
         });
 
@@ -5642,6 +5661,30 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Should be called when data and/or isLoading input changes so that the overlay can be
+     * hidden/shown based on the current value of shouldOverlayLoading
+     */
+    protected evaluateLoadingState() {
+        if (this.shouldOverlayLoading) {
+            // a new overlay should be shown
+            const overlaySettings: OverlaySettings = {
+                outlet: this.loadingOutlet,
+                closeOnOutsideClick: false,
+                positionStrategy: new ContainerPositionStrategy()
+            };
+            if (!this._loadingId) {
+                this._loadingId = this.overlayService.attach(this.loadingOverlay, overlaySettings);
+                this.overlayService.show(this._loadingId, overlaySettings);
+            }
+        } else {
+            if (this._loadingId) {
+                this.overlayService.hide(this._loadingId);
+                this._loadingId = null;
+            }
+        }
+    }
+
     openRowOverlay(id) {
         this.configureRowEditingOverlay(id, this.rowList.length <= MIN_ROW_EDITING_COUNT_THRESHOLD);
 
@@ -5829,6 +5872,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this._exportCsv;
     }
 
+    /**
+     * @hidden
+     */
+    get shouldOverlayLoading(): boolean {
+        return this.isLoading && this.data && this.data.length > 0;
+    }
+
     /**
     * @hidden
     */

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

@@ -138,6 +138,10 @@
         <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">
+        </igx-circular-bar>
+    </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true"
         id="right" class="igx-grid__scroll-on-drag-right"></span>
     <div [hidden]='!hasVerticalSroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollWidth"
@@ -266,4 +270,5 @@
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
+<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -358,6 +358,7 @@ describe('IgxGrid Component Tests #grid', () => {
             tick(16);
 
             const grid = fixture.componentInstance.grid;
+            const gridElement = fixture.debugElement.query(By.css('.igx-grid'));
             const gridBody = fixture.debugElement.query(By.css(TBODY_CLASS));
             let loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
 
@@ -373,6 +374,10 @@ describe('IgxGrid Component Tests #grid', () => {
             loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
             expect(loadingIndicator).toBeNull();
 
+            // the overlay should be shown
+            loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet'));
+            expect(loadingIndicator.nativeElement.children.length).not.toBe(0);
+
             // Check for empty filter grid message and body less than 100px
             const columns = fixture.componentInstance.grid.columns;
             grid.filter(columns[0].field, 546000, IgxNumberFilteringOperand.instance().condition('equals'));
@@ -393,6 +398,10 @@ describe('IgxGrid Component Tests #grid', () => {
 
             loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
             expect(loadingIndicator).not.toBeNull();
+
+            // the overlay should be hidden
+            loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet'));
+            expect(loadingIndicator.nativeElement.children.length).toBe(0);
         }));
 
         it('should render loading indicator when loading is enabled and autoGenerate is enabled', fakeAsync(() => {
@@ -478,6 +487,50 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBeGreaterThan(500);
         }));
 
+        it('should remove loading overlay when isLoading is set to false', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxGridTestComponent);
+            fixture.componentInstance.data = [];
+            fixture.componentInstance.grid.isLoading = true;
+            fixture.detectChanges();
+            tick(16);
+
+            const grid = fixture.componentInstance.grid;
+            const gridElement = fixture.debugElement.query(By.css('.igx-grid'));
+            const gridBody = fixture.debugElement.query(By.css(TBODY_CLASS));
+            let loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+
+            expect(loadingIndicator).not.toBeNull();
+            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
+
+            // Check for loaded rows in grid's container
+            fixture.componentInstance.generateData(30);
+            fixture.detectChanges();
+            tick(1000);
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(548);
+
+            loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            expect(loadingIndicator).toBeNull();
+
+            // the overlay should be shown
+            loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet'));
+            expect(loadingIndicator.nativeElement.children.length).not.toBe(0);
+
+            grid.isLoading = false;
+            tick(16);
+            expect(loadingIndicator.nativeElement.children.length).toBe(0);
+
+            // Clearing grid's data and check for empty grid message
+            fixture.componentInstance.clearData();
+            fixture.detectChanges();
+            tick(100);
+
+            // isLoading is still false so the empty data message should show, not the loading indicator
+            loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            expect(loadingIndicator).toBeNull();
+
+            expect(gridBody.nativeElement.textContent).toEqual(grid.emptyGridMessage);
+        }));
+
         it('should render empty message when grid height is 100%', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxGridEmptyMessage100PercentComponent);
             fixture.detectChanges();

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

@@ -61,6 +61,10 @@
         <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">
+        </igx-circular-bar>
+    </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true"
         id="right" class="igx-grid__scroll-on-drag-right"></span>
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalSroll()' [style.width.px]="scrollWidth"></div>
@@ -231,4 +235,5 @@
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
+<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

@@ -637,7 +637,7 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
         expect(child2._destroyed).toBeTruthy();
     }));
 
-    it(' should emit child grid events with the related child grid instance as an event arg.', async() => {
+    it('should emit child grid events with the related child grid instance as an event arg.', async() => {
         const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
         UIInteractions.clickElement(row.expander);
         fixture.detectChanges();

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

@@ -50,6 +50,10 @@
             [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">
+        </igx-circular-bar>
+    </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true"
         id="right" class="igx-grid__scroll-on-drag-right"></span>
 </div>
@@ -206,4 +210,5 @@
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
+<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>