Merge branch 'master' into mdragnev/zoneless-sticky-tooltip

Author: ChronosSF

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

@@ -464,6 +464,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

@@ -2374,6 +2374,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

@@ -330,10 +330,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