fix(grid) Centering the grid loader outlet inside the grid-body (#11745)

* refactor(grid) move the loader outlet inside the grid body

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: desig9stein

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

@@ -1202,7 +1202,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(7);
+            expect(grid.childElementCount).toEqual(6);
         }));
         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/grid.component.html

@@ -154,6 +154,7 @@
     </div>
 
     <div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
+    <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 </div>
 
 
@@ -270,5 +271,4 @@
 </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>