fix(grid): update loading outlet styles to remove modal background (#17413)

* fix(grid): update loading outlet styles to remove modal background

* fix(grid): Potential fix for pull request finding

* fix(grid): update loading outlet structure and styles

Author: dkamburov

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

@@ -458,6 +458,10 @@
             @extend %igx-grid__outlet !optional;
         }
 
+        @include e(loading-outlet) {
+            @extend %igx-grid__loading-outlet !optional;
+        }
+
         @include e(addrow-snackbar) {
             @extend %igx-grid__addrow-snackbar !optional;
         }

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

@@ -2342,6 +2342,12 @@
         --ig-size: var(--grid-size);
     }
 
+    %igx-grid__loading-outlet {
+        %overlay-wrapper--modal {
+            background: none;
+        }
+    }
+
     %igx-grid__addrow-snackbar {
         position: absolute;
         z-index: 5;

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

@@ -129,10 +129,12 @@
             <igc-trial-watermark></igc-trial-watermark>
         }
     </div>
-    <div igxToggle #loadingOverlay>
-        @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
-        }
+    <div class="igx-grid__loading-outlet">
+        <div igxToggle #loadingOverlay>
+            @if (shouldOverlayLoading) {
+                <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+            }
+        </div>
     </div>
     @if (moving && columnInDrag) {
         <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"

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

@@ -63,10 +63,12 @@
         <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 class="igx-grid__loading-outlet">
+        <div igxToggle #loadingOverlay>
+            @if (shouldOverlayLoading) {
+                <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+            }
+        </div>
     </div>
     @if (hasMovableColumns && columnInDrag) {
         <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"

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

@@ -119,10 +119,12 @@
         <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 class="igx-grid__loading-outlet">
+        <div igxToggle #loadingOverlay>
+            @if (shouldOverlayLoading) {
+                <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+            }
+        </div>
     </div>
     @if (moving && columnInDrag) {
         <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"