AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab (#10913)

* AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab

Co-authored-by: tomson <tomasz.nastaly@hyland.com>

* AAE-34641 Fix pdf scaling

* AAE-34641 Remove RenderType refactoring

---------

Co-authored-by: tomson <tomasz.nastaly@hyland.com>

lib/core/src/lib/form/components/form-renderer.component.html

@@ -2,11 +2,13 @@
      [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
     <div *ngIf="formDefinition.hasTabs()">
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
-            <mat-tab-group>
-                <mat-tab   *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
-                    <ng-container class="adf-form-tab-content">
-                        <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
-                    </ng-container>
+            <mat-tab-group [preserveContent]="true">
+                <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
+                    <ng-template matTabContent>
+                        <div class="adf-form-tab-content">
+                            <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
+                        </div>
+                    </ng-template>
                 </mat-tab>
             </mat-tab-group>
         </div>

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts

@@ -254,7 +254,9 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
 
                     return pdfDocument.getPage(1);
                 })
-                .then(() => this.scalePage('init'))
+                .then(() => {
+                    setTimeout(() => this.scalePage('init'));
+                })
                 .catch(() => this.error.emit());
         });
     }
@@ -618,8 +620,8 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
      *
      */
     onPagesLoaded() {
-        this.pagesLoaded.emit();
         this.isPanelDisabled = false;
+        this.pagesLoaded.emit();
     }
 
     /**

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html

@@ -1,95 +1,105 @@
-<div *ngIf="(viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image') ? isLoading || !isContentReady : isLoading"
-    class="adf-viewer-render-main-loader">
+<div *ngIf="isLoading" class="adf-viewer-render-main-loader">
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
         <div class="adf-viewer-render-content-container">
-            <div class="adf-viewer-render__loading-screen ">
+            <div class="adf-viewer-render__loading-screen">
                 <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                 <div>
-                    <mat-spinner class="adf-viewer-render__loading-screen__spinner"/>
+                    <mat-spinner class="adf-viewer-render__loading-screen__spinner" />
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<div *ngIf="!isLoading"
-     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'">
-                <adf-preview-extension *ngIf="!!externalViewer"
-                                       [id]="externalViewer.component"
-                                       [url]="urlFile"
-                                       [extension]="externalViewer.fileExtension"
-                                       [nodeId]="nodeId"
-                                       [attr.data-automation-id]="externalViewer.component" />
-            </ng-container>
-
-            <ng-container *ngSwitchCase="'pdf'">
-                <adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate"
-                                [allowThumbnails]="allowThumbnails"
-                                [blobFile]="blobFile"
-                                [urlFile]="urlFile"
-                                [fileName]="internalFileName"
-                                [cacheType]="cacheTypeForContent"
-                                (pagesLoaded)="isContentReady = true"
-                                (close)="onClose()"
-                                (error)="onUnsupportedFile()" />
-            </ng-container>
-
-            <ng-container *ngSwitchCase="'image'">
-                <adf-img-viewer [urlFile]="urlFile"
-                                [readOnly]="readOnly"
-                                [fileName]="internalFileName"
-                                [allowedEditActions]="allowedEditActions"
-                                [blobFile]="blobFile"
-                                (error)="onUnsupportedFile()"
-                                (submit)="onSubmitFile($event)"
-                                (imageLoaded)="isContentReady = true"
-                                (isSaving)="isSaving.emit($event)"
-                />
-            </ng-container>
-
-            <ng-container *ngSwitchCase="'media'">
-                <adf-media-player id="adf-mdedia-player"
-                                  [urlFile]="urlFile"
-                                  [tracks]="tracks"
-                                  [mimeType]="mimeType"
-                                  [blobFile]="blobFile"
-                                  [fileName]="internalFileName"
-                                  (error)="onUnsupportedFile()"
-                                  (canPlay)="isContentReady = true"/>
-            </ng-container>
-
-            <ng-container *ngSwitchCase="'text'">
-                <adf-txt-viewer [urlFile]="urlFile"
-                                [blobFile]="blobFile" />
-            </ng-container>
-
-            <ng-container *ngSwitchCase="'custom'">
-                <ng-container *ngFor="let ext of viewerExtensions">
-                    <adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
-                                           [id]="ext.component"
-                                           [url]="urlFile"
-                                           [extension]="extension"
-                                           [nodeId]="nodeId"
-                                           [attr.data-automation-id]="ext.component" />
+@if (urlFile || blobFile) {
+    <div [hidden]="isLoading" 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'">
+                    <adf-preview-extension
+                        *ngIf="!!externalViewer"
+                        [id]="externalViewer.component"
+                        [url]="urlFile"
+                        [extension]="externalViewer.fileExtension"
+                        [nodeId]="nodeId"
+                        [attr.data-automation-id]="externalViewer.component"
+                    />
                 </ng-container>
 
-                <ng-container *ngFor="let extensionTemplate of extensionTemplates">
-                    <span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content">
-                        <ng-template [ngTemplateOutlet]="extensionTemplate.template"
-                                     [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }" />
-                    </span>
+                <ng-container *ngSwitchCase="'pdf'">
+                    <adf-pdf-viewer
+                        [thumbnailsTemplate]="thumbnailsTemplate"
+                        [allowThumbnails]="allowThumbnails"
+                        [blobFile]="blobFile"
+                        [urlFile]="urlFile"
+                        [fileName]="internalFileName"
+                        [cacheType]="cacheTypeForContent"
+                        (pagesLoaded)="markAsLoaded()"
+                        (close)="onClose()"
+                        (error)="onUnsupportedFile()"
+                    />
                 </ng-container>
-            </ng-container>
 
-            <ng-container *ngSwitchDefault>
-                <adf-viewer-unknown-format [customError]="customError"/>
-            </ng-container>
+                <ng-container *ngSwitchCase="'image'">
+                    <adf-img-viewer
+                        [urlFile]="urlFile"
+                        [readOnly]="readOnly"
+                        [fileName]="internalFileName"
+                        [allowedEditActions]="allowedEditActions"
+                        [blobFile]="blobFile"
+                        (error)="onUnsupportedFile()"
+                        (submit)="onSubmitFile($event)"
+                        (imageLoaded)="markAsLoaded()"
+                        (isSaving)="isSaving.emit($event)"
+                    />
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'media'">
+                    <adf-media-player
+                        id="adf-mdedia-player"
+                        [urlFile]="urlFile"
+                        [tracks]="tracks"
+                        [mimeType]="mimeType"
+                        [blobFile]="blobFile"
+                        [fileName]="internalFileName"
+                        (error)="onUnsupportedFile()"
+                        (canPlay)="markAsLoaded()"
+                    />
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'text'">
+                    <adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" />
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'custom'">
+                    <ng-container *ngFor="let ext of viewerExtensions">
+                        <adf-preview-extension
+                            *ngIf="checkExtensions(ext.fileExtension)"
+                            [id]="ext.component"
+                            [url]="urlFile"
+                            [extension]="extension"
+                            [nodeId]="nodeId"
+                            [attr.data-automation-id]="ext.component"
+                        />
+                    </ng-container>
+
+                    <ng-container *ngFor="let extensionTemplate of extensionTemplates">
+                        <span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content">
+                            <ng-template
+                                [ngTemplateOutlet]="extensionTemplate.template"
+                                [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }"
+                            />
+                        </span>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngSwitchDefault>
+                    <adf-viewer-unknown-format [customError]="customError" />
+                </ng-container>
+            </div>
         </div>
     </div>
-</div>
+}
 <ng-container *ngIf="viewerTemplateExtensions">
     <ng-template [ngTemplateOutlet]="viewerTemplateExtensions" [ngTemplateOutletInjector]="injector" />
 </ng-container>

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts

@@ -24,7 +24,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { NoopTranslateModule, UnitTestingUtils } from '../../../testing';
 import { RenderingQueueServices } from '../../services/rendering-queue.services';
 import { ViewerRenderComponent } from './viewer-render.component';
-import { ImgViewerComponent, MediaPlayerComponent, ViewerExtensionDirective } from '@alfresco/adf-core';
+import { ImgViewerComponent, MediaPlayerComponent, PdfViewerComponent, ViewerExtensionDirective } from '@alfresco/adf-core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 @Component({
@@ -506,19 +506,17 @@ describe('ViewerComponent', () => {
             expect(component.viewerType).toBe('media');
         });
 
-        // eslint-disable-next-line ban/ban
-        xit('should show spinner until content is ready when viewerType is pdf', () => {
-            component.isLoading = false;
+        it('should display spinner when viewerType is pdf', () => {
             component.urlFile = 'some-url.pdf';
+            expect(getMainLoader()).toBeNull();
 
             component.ngOnChanges();
             fixture.detectChanges();
 
-            expect(getMainLoader()).not.toBeNull();
-
+            const imgViewer = testingUtils.getByDirective(PdfViewerComponent);
+            imgViewer.triggerEventHandler('pagesLoaded', null);
             fixture.detectChanges();
 
-            expect(getMainLoader()).toBeNull();
             expect(component.viewerType).toBe('pdf');
         });
 
@@ -546,7 +544,6 @@ describe('ViewerComponent', () => {
             fixture.detectChanges();
 
             expect(getMainLoader()).toBeNull();
-            expect(component.isContentReady).toBeFalse();
         });
     });
 });

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts

@@ -86,10 +86,6 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     @Input()
     fileName: string;
 
-    /** Override loading status */
-    @Input()
-    isLoading = false;
-
     /** Enable when where is possible the editing functionalities  */
     @Input()
     readOnly = true;
@@ -142,7 +138,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     extension: string;
     internalFileName: string;
     viewerType: string = 'unknown';
-    isContentReady = false;
+    isLoading = false;
 
     /**
      * Returns a list of the active Viewer content extensions.
@@ -182,12 +178,10 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
 
     ngOnInit() {
         this.cacheTypeForContent = 'no-cache';
+        this.setDefaultLoadingState();
     }
 
     ngOnChanges() {
-        this.isContentReady = false;
-        this.isLoading = !this.blobFile && !this.urlFile;
-
         if (this.blobFile) {
             this.setUpBlobData();
         } else if (this.urlFile) {
@@ -195,6 +189,10 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
         }
     }
 
+    markAsLoaded() {
+        this.isLoading = false;
+    }
+
     private setUpBlobData() {
         this.internalFileName = this.fileName;
         this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
@@ -235,4 +233,14 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     onClose() {
         this.close.next(true);
     }
+
+    private canBePreviewed(): boolean {
+        return this.viewerType === 'media' || this.viewerType === 'pdf' || this.viewerType === 'image';
+    }
+
+    private setDefaultLoadingState() {
+        if (this.canBePreviewed()) {
+            this.isLoading = true;
+        }
+    }
 }