From 0a83d7421b6f572d04aba539b541fea21206aeaf Mon Sep 17 00:00:00 2001
From: MichalKinas <michal.kinas@hyland.com>
Date: Thu, 12 Jun 2025 14:35:20 +0200
Subject: [PATCH] [ACS-9763] Ensure that canvas is updated after image is
 loaded and spinner is hidden

---
 .../img-viewer/img-viewer.component.spec.ts     |  8 ++++++++
 .../img-viewer/img-viewer.component.ts          | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.spec.ts b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.spec.ts
index 6e47d40526..1a426574c6 100644
--- a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.spec.ts
+++ b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.spec.ts
@@ -101,6 +101,14 @@ describe('Test Img viewer component ', () => {
             fixture.componentInstance.ngAfterViewInit();
             expect(component.cropper).toBeDefined();
         });
+
+        it('should update canvas container after image is loaded', fakeAsync(() => {
+            spyOn(component, 'updateCanvasContainer');
+            component.imageLoaded.emit();
+            tick(200);
+
+            expect(component.updateCanvasContainer).toHaveBeenCalled();
+        }));
     });
 
     describe('Blob', () => {
diff --git a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts
index 1f535b3d3f..b37cb7867a 100644
--- a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts
+++ b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts
@@ -19,9 +19,11 @@ import { NgIf } from '@angular/common';
 import {
     AfterViewInit,
     Component,
+    DestroyRef,
     ElementRef,
     EventEmitter,
     HostListener,
+    inject,
     Input,
     OnChanges,
     OnDestroy,
@@ -37,6 +39,7 @@ import Cropper from 'cropperjs';
 import { AppConfigService } from '../../../app-config';
 import { UrlService } from '../../../common';
 import { ToolbarComponent } from '../../../toolbar';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-img-viewer',
@@ -125,6 +128,8 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
         }
     }
 
+    private readonly destroyRef = inject(DestroyRef);
+
     scale: number = 1.0;
     cropper: Cropper;
     isEditing: boolean = false;
@@ -156,6 +161,13 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
 
     ngAfterViewInit() {
+        this.imageLoaded.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            // Ensure the canvas container is updated after the image is loaded and spinner is hidden
+            setTimeout(() => {
+                this.updateCanvasContainer();
+            }, 100);
+        });
+
         this.cropper = new Cropper(this.imageElement.nativeElement, {
             autoCrop: false,
             checkOrientation: false,
@@ -165,10 +177,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
             zoomOnWheel: true,
             toggleDragModeOnDblclick: false,
             viewMode: 1,
-            checkCrossOrigin: false,
-            ready: () => {
-                this.updateCanvasContainer();
-            }
+            checkCrossOrigin: false
         });
     }