feat(overlay): remove grid loading outlet

Author: wnvko

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

@@ -1147,13 +1147,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     @ViewChild('loadingOverlay', { read: IgxToggleDirective, static: true })
-    public loadingOverlay: IgxToggleDirective;
-
-    /**
-     * @hidden @internal
-     */
-    @ViewChild('igxLoadingOverlayOutlet', { static: true })
-    public loadingOutlet: ElementRef<HTMLElement>;
+    public loadingOverlay?: IgxToggleDirective;
 
     /* reactContentChildren */
     /* blazorInclude */
@@ -6731,13 +6725,12 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (this.shouldOverlayLoading) {
             // a new overlay should be shown
             const overlaySettings: OverlaySettings = {
-                outlet: this.loadingOutlet,
                 closeOnOutsideClick: false,
                 positionStrategy: new ContainerPositionStrategy()
             };
-            this.loadingOverlay.open(overlaySettings);
+            this.loadingOverlay?.open(overlaySettings);
         } else {
-            this.loadingOverlay.close();
+            this.loadingOverlay?.close();
         }
     }
 

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

@@ -160,12 +160,6 @@
         <ng-container #bodyViewContainerRef></ng-container>
         <igc-trial-watermark></igc-trial-watermark>
     </div>
-    <div igxToggle #loadingOverlay>
-        @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true">
-            </igx-circular-bar>
-        }
-    </div>
     @if (moving && columnInDrag) {
         <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
             id="right" class="igx-grid__scroll-on-drag-right"></span>
@@ -182,7 +176,13 @@
         <igx-snackbar #addRowSnackbar [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]="snackbarDisplayTime">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
     </div>
 
-    <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
+    <div class="igx-grid__loading-outlet">
+        <div igxToggle>
+            @if (shouldOverlayLoading) {
+                <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+            }
+        </div>
+    </div>
 </div>
 
 

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

@@ -463,7 +463,7 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth);
             expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight);
 
-            expect(loadingIndicator.nativeElement.children.length).not.toBe(0);
+            expect(loadingIndicator.nativeElement.children.length).not.toBeNull();
 
             // Check for empty filter grid message and body less than 100px
             const columns = fixture.componentInstance.grid.columnList;
@@ -490,7 +490,7 @@ describe('IgxGrid Component Tests #grid', () => {
             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);
+            expect(loadingIndicator.query(By.css('igx-circular-bar'))).toBeNull();
         }));
 
         it('should render loading indicator when loading is enabled and autoGenerate is enabled', fakeAsync(() => {
@@ -644,11 +644,12 @@ describe('IgxGrid Component Tests #grid', () => {
             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);
+            expect(loadingIndicator.query(By.css('igx-circular-bar'))).not.toBeNull();
 
             grid.isLoading = false;
             tick(16);
-            expect(loadingIndicator.nativeElement.children.length).toBe(0);
+            fixture.detectChanges();
+            expect(loadingIndicator.query(By.css('igx-circular-bar'))).toBeNull();
 
             // Clearing grid's data and check for empty grid message
             fixture.componentInstance.clearData();