diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
index 4957bf985d..266f27c486 100644
--- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
+++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
@@ -13,7 +13,7 @@
 </div>
 
 @if (urlFile || blobFile) {
-    <div [hidden]="isLoading" class="adf-viewer-render-main">
+    <div [style.visibility]="isLoading ? 'hidden' : 'visible'" class="adf-viewer-render-main">
         <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
             <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
                 <ng-container *ngSwitchCase="'external'">
diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
index 61f5a88748..666e8258f3 100644
--- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
+++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
@@ -278,6 +278,9 @@ describe('ViewerComponent', () => {
             fixtureCustom.detectChanges();
             await fixtureCustom.whenStable();
 
+            fixtureCustom.componentInstance.viewer1.markAsLoaded();
+            fixtureCustom.detectChanges();
+
             let customContent = getCustomViewerContent(fixtureCustom);
             expect(customComponent.extensionsSupportedByTemplates).toEqual(['json', 'test']);
             expect(customComponent.extensionTemplates.length).toBe(2);
@@ -291,6 +294,9 @@ describe('ViewerComponent', () => {
             fixtureCustom.detectChanges();
             await fixtureCustom.whenStable();
 
+            fixtureCustom.componentInstance.viewer1.markAsLoaded();
+            fixtureCustom.detectChanges();
+
             customContent = getCustomViewerContent(fixtureCustom);
             expect(customComponent.extensionTemplates[0].isVisible).toBeFalse();
             expect(customComponent.extensionTemplates[1].isVisible).toBeTrue();
@@ -410,6 +416,21 @@ describe('ViewerComponent', () => {
             expect(component.isSaving.emit).toHaveBeenCalledWith(true);
         });
 
+        it('should render invisible container during loading', async () => {
+            component.urlFile = 'fake-url-file.png';
+            component.viewerType = 'image';
+            fixture.detectChanges();
+            component.ngOnChanges();
+            component.isLoading = true;
+            await fixture.whenStable();
+
+            const container: HTMLDivElement = testingUtils.getByCSS('.adf-viewer-render-main')?.nativeElement;
+            expect(container).toBeDefined();
+            expect(container.style.display).not.toBe('none');
+            expect(container.clientWidth).toBe(0);
+            expect(container.clientHeight).toBeGreaterThan(0);
+        });
+
         describe('Attribute', () => {
             it('should  urlFile present not thrown any error ', () => {
                 expect(() => {