From 73e9bfe2e6451e6494d1861b7f15970849632ab8 Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@infragistics.com>
Date: Fri, 10 Jul 2026 15:39:41 +0300
Subject: [PATCH 1/3] fix(grid): update loading outlet styles to remove modal
 background

---
 .../core/src/core/styles/components/grid/_grid-theme.scss   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index 2295bc01c7a..ca94cd09c9c 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/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 {
+        .igx-overlay__wrapper--modal {
+            background: none;
+        }
+    }
+
     %igx-grid__addrow-snackbar {
         position: absolute;
         z-index: 5;

From 6a53d66fdf017639b4e24e531ec8e280d4216ec0 Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@users.noreply.github.com>
Date: Fri, 10 Jul 2026 16:18:21 +0300
Subject: [PATCH 2/3] fix(grid): Potential fix for pull request finding

---
 .../core/src/core/styles/components/grid/_grid-theme.scss       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index ca94cd09c9c..f89dbee306a 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -2374,7 +2374,7 @@
         --ig-size: var(--grid-size);
     }
 
-    .igx-grid__loading-outlet {
+    .igx-grid__tbody {
         .igx-overlay__wrapper--modal {
             background: none;
         }

From a14d068401f85109ff05103cce8c777ca0ce1b72 Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@infragistics.com>
Date: Mon, 13 Jul 2026 15:27:31 +0300
Subject: [PATCH 3/3] fix(grid): update loading outlet structure and styles

---
 .../core/styles/components/grid/_grid-component.scss   |  4 ++++
 .../src/core/styles/components/grid/_grid-theme.scss   |  4 ++--
 .../src/hierarchical-grid.component.html               | 10 ++++++----
 .../grids/pivot-grid/src/pivot-grid.component.html     | 10 ++++++----
 .../grids/tree-grid/src/tree-grid.component.html       | 10 ++++++----
 5 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
index 29463e45c6b..882ae93824e 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
+++ b/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;
         }
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index f89dbee306a..49f7c929c34 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -2374,8 +2374,8 @@
         --ig-size: var(--grid-size);
     }
 
-    .igx-grid__tbody {
-        .igx-overlay__wrapper--modal {
+    %igx-grid__loading-outlet {
+        %overlay-wrapper--modal {
             background: none;
         }
     }
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
index 058e9f9c040..218e0cba312 100644
--- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
+++ b/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"
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
index 34c19e6198d..69dbf5ec03a 100644
--- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
+++ b/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"
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
index 69fecf903c5..d55a1cceba6 100644
--- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
+++ b/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