fix(grid): fix grid loading indicator position (#16952)

Author: wnvko

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

@@ -2341,7 +2341,10 @@
     }
 
     %igx-grid__loading-outlet {
-        z-index: 10003;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        position: absolute;
 
         > %overlay-wrapper--modal {
             background: none;

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

@@ -442,48 +442,54 @@ describe('IgxGrid Component Tests #grid', () => {
 
             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'));
+            const gridBodyContent = fixture.debugElement.query(By.css(TBODY_CLASS));
+            let loadingIndicator = gridBodyContent.query(By.css('.igx-grid__loading'));
 
             expect(loadingIndicator).not.toBeNull();
-            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
+            expect(gridBodyContent.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)).toBeGreaterThan(300);
+            expect(parseInt(window.getComputedStyle(gridBodyContent.nativeElement).height, 10)).toBeGreaterThan(300);
 
-            loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            loadingIndicator = gridBodyContent.query(By.css('.igx-grid__loading'));
             expect(loadingIndicator).toBeNull();
 
-            // the overlay should be shown
+            // the overlay should be shown and container should have the same dimensions as the grid's body
             loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet'));
+            const gridBody = fixture.debugElement.query(By.css('.igx-grid__tbody'));
+            expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth);
+            expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight);
+
             expect(loadingIndicator.nativeElement.children.length).not.toBe(0);
 
             // Check for empty filter grid message and body less than 100px
             const columns = fixture.componentInstance.grid.columnList;
             grid.filter(columns.get(0).field, 546000, IgxNumberFilteringOperand.instance().condition('equals'));
             fixture.detectChanges();
             tick(100);
-            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
+            expect(gridBodyContent.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
 
             // Clear filter and check if grid's body height is restored based on all loaded rows
             grid.clearFilter(columns.get(0).field);
             fixture.detectChanges();
             tick(100);
-            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBeGreaterThan(300);
+            expect(parseInt(window.getComputedStyle(gridBodyContent.nativeElement).height, 10)).toBeGreaterThan(300);
 
             // Clearing grid's data and check for empty grid message
             fixture.componentInstance.clearData();
             fixture.detectChanges();
             tick(100);
 
-            loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            loadingIndicator = gridBodyContent.query(By.css('.igx-grid__loading'));
             expect(loadingIndicator).not.toBeNull();
 
-            // the overlay should be hidden
+            // the overlay should be hidden and container should have the same dimensions as the grid's body
             loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet'));
+            expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth);
+            expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight);
             expect(loadingIndicator.nativeElement.children.length).toBe(0);
         }));
 
@@ -618,23 +624,26 @@ describe('IgxGrid Component Tests #grid', () => {
 
             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'));
+            const gridBodyContent = fixture.debugElement.query(By.css(TBODY_CLASS));
+            let loadingIndicator = gridBodyContent.query(By.css('.igx-grid__loading'));
 
             expect(loadingIndicator).not.toBeNull();
-            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
+            expect(gridBodyContent.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);
+            expect(parseInt(window.getComputedStyle(gridBodyContent.nativeElement).height, 10)).toBe(548);
 
-            loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            loadingIndicator = gridBodyContent.query(By.css('.igx-grid__loading'));
             expect(loadingIndicator).toBeNull();
 
-            // the overlay should be shown
+            // the overlay should be shown and container should have the same dimensions as the grid's body
             loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet'));
+            const gridBody = fixture.debugElement.query(By.css('.igx-grid__tbody'));
+            expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth);
+            expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight);
             expect(loadingIndicator.nativeElement.children.length).not.toBe(0);
 
             grid.isLoading = false;
@@ -647,10 +656,10 @@ describe('IgxGrid Component Tests #grid', () => {
             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'));
+            loadingIndicator = gridBodyContent.query(By.css('.igx-grid__loading'));
             expect(loadingIndicator).toBeNull();
 
-            expect(gridBody.nativeElement.textContent).toEqual(grid.emptyGridMessage);
+            expect(gridBodyContent.nativeElement.textContent).toEqual(grid.emptyGridMessage);
         }));
 
         it('should render empty message when grid height is 100%', fakeAsync(() => {

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

@@ -441,7 +441,11 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
             const gridHeight = childGrid.nativeElement.offsetHeight;
             const childElements: HTMLElement[] = Array.from(childGrid.nativeElement.children) as HTMLElement [];
-            const elementsHeight = childElements.map(elem => elem.offsetHeight).reduce((total, height) => total + height, 0);
+            const elementsHeight = childElements
+                // skip the loading outlet element as it is positioned absolute and doesn't take part in the height calculation of the grid
+                .filter(elem => !elem.className.includes('igx-grid__loading-outlet'))
+                .map(elem => elem.offsetHeight)
+                .reduce((total, height) => total + height, 0);
 
             // Expect the combined height of all elements (header, body, footer etc) to equal the calculated height of the grid.
             expect(elementsHeight).toEqual(gridHeight);