diff --git a/projects/igniteui-angular/src/lib/list/list.component.html b/projects/igniteui-angular/src/lib/list/list.component.html
index 69be95cb28b..b42ba6689c2 100644
--- a/projects/igniteui-angular/src/lib/list/list.component.html
+++ b/projects/igniteui-angular/src/lib/list/list.component.html
@@ -12,7 +12,7 @@
     </article>
 </ng-template>
 
-<ng-container *ngIf="!children || children.length === 0">
+<ng-container *ngIf="!children || children.length === 0 || isLoading">
     <ng-container *ngTemplateOutlet="template; context: context">
     </ng-container>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/list/list.component.spec.ts b/projects/igniteui-angular/src/lib/list/list.component.spec.ts
index 917372eeb81..f68505a2e96 100644
--- a/projects/igniteui-angular/src/lib/list/list.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/list/list.component.spec.ts
@@ -284,6 +284,25 @@ describe('List', () => {
         expect(noItemsParagraphEl.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
     });
 
+    it('Should show loading template when isLoading=\'true\' even when there are children.', () => {
+        const fixture = TestBed.createComponent(ListWithHeaderComponent);
+        const list = fixture.componentInstance.list;
+        list.isLoading = true;
+        const listLoadingItemsMessage = 'Loading data from the server...';
+
+        fixture.detectChanges();
+
+        verifyItemsCount(list, 3);
+
+        const noItemsParagraphEl = fixture.debugElement.query(By.css('p'));
+        expect(noItemsParagraphEl.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
+
+        list.isLoading = false;
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('p'))).toBeFalsy();
+    });
+
     it('Should have custom loading template.', () => {
         const fixture = TestBed.createComponent(ListCustomLoadingComponent);
         const list = fixture.componentInstance.list;