fix(grid): loading not showing in empty filtered grids #8279

Author: ChronosSF

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

@@ -6486,6 +6486,26 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.transactions.enabled ? this.dataWithAddedInTransactionRows.length : this.gridAPI.get_all_data().length;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get template(): TemplateRef<any> {
+        const hasZeroResultFilter = this.filteredData && this.filteredData.length === 0;
+        const hasNoData = !this.data || this.dataLength === 0;
+
+        if (this.isLoading && (hasZeroResultFilter || hasNoData)) {
+            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
+        }
+
+        if (hasZeroResultFilter) {
+            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
+        }
+
+        if (hasNoData) {
+            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
+        }
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -482,6 +482,26 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBeGreaterThan(500);
         }));
 
+        fit('should render loading indicator when loading is enabled and the grid has empty filtering pre-applied', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxGridTestComponent);
+            const grid = fixture.componentInstance.grid;
+            grid.filter('index', 0, IgxNumberFilteringOperand.instance().condition('equals'), true);
+            grid.isLoading = true;
+            fixture.detectChanges();
+            tick(16);
+
+            const gridBody = fixture.debugElement.query(By.css(TBODY_CLASS));
+            let loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            const domGrid = fixture.debugElement.query(By.css('igx-grid')).nativeElement;
+
+            // make sure default width/height are applied when there is no data
+            expect(domGrid.style.height).toBe('100%');
+            expect(domGrid.style.width).toBe('100%');
+
+            expect(loadingIndicator).not.toBeNull();
+            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
+        }));
+
         it('should allow applying custom loading indicator', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxGridRemoteOnDemandComponent);
             fixture.componentInstance.instance.loadingGridTemplate = fixture.componentInstance.customTemaplate;

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

@@ -829,24 +829,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         }
     }
 
-
-    /**
-     * @hidden @internal
-     */
-    public get template(): TemplateRef<any> {
-        if (this.filteredData && this.filteredData.length === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
-        }
-
-        if (this.isLoading && (!this.data || this.dataLength === 0)) {
-            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
-        }
-
-        if (this.dataLength === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
-        }
-    }
-
     /**
      * @hidden @internal
      */

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

@@ -469,23 +469,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         });
     }
 
-    /**
-     * @hidden
-     */
-    public get template(): TemplateRef<any> {
-        if (this.filteredData && this.filteredData.length === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
-        }
-
-        if (this.isLoading && (!this.data || this.dataLength === 0)) {
-            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
-        }
-
-        if (this.dataLength === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
-        }
-    }
-
     /**
      * @hidden
      */

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

@@ -651,23 +651,6 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         return this.extractDataFromSelection(source, formatters, headers);
     }
 
-    /**
-     * @hidden
-     */
-    public get template(): TemplateRef<any> {
-        if (this.filteredData && this.filteredData.length === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
-        }
-
-        if (this.isLoading && (!this.data || this.dataLength === 0)) {
-            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
-        }
-
-        if (this.dataLength === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
-        }
-    }
-
     protected writeToData(rowIndex: number, value: any) {
         mergeObjects(this.flatData[rowIndex], value);
     }