AAE-34641 Fix form loading when tab is changed (#10843)

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

@@ -1,91 +1,105 @@
-<div *ngIf="(viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image') ? isLoading || !isContentReady : isLoading"
-    class="adf-viewer-render-main-loader">
+<div
+    *ngIf="viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image' ? (isLoading || !isContentReady) : 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
+    [hidden]="viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image' ? (isLoading || !isContentReady) : 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" />
+                <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()" />
+                <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)"
+                <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"/>
+                <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" />
+                <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" />
+                    <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 }" />
+                        <ng-template
+                            [ngTemplateOutlet]="extensionTemplate.template"
+                            [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }"
+                        />
                     </span>
                 </ng-container>
             </ng-container>
 
             <ng-container *ngSwitchDefault>
-                <adf-viewer-unknown-format [customError]="customError"/>
+                <adf-viewer-unknown-format [customError]="customError" />
             </ng-container>
         </div>
     </div>

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({
@@ -504,22 +504,23 @@ describe('ViewerComponent', () => {
 
             expect(getMainLoader()).toBeNull();
             expect(component.viewerType).toBe('media');
+            expect(component.isContentReady).toBeTrue();
         });
 
-        // eslint-disable-next-line ban/ban
-        xit('should show spinner until content is ready when viewerType is pdf', () => {
+        it('should show spinner until content is ready when viewerType is pdf', () => {
             component.isLoading = false;
             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');
+            expect(component.isContentReady).toBeTrue();
         });
 
         it('should show spinner until content is ready when viewerType is image', () => {
@@ -536,9 +537,10 @@ describe('ViewerComponent', () => {
 
             expect(getMainLoader()).toBeNull();
             expect(component.viewerType).toBe('image');
+            expect(component.isContentReady).toBeTrue();
         });
 
-        it('should not show spinner when isLoading = false and isContentReady = false for other viewer types', () => {
+        it('should not show spinner and set isContentReady = true for other viewer types different than media/pdf/image', () => {
             component.isLoading = false;
             component.urlFile = 'some-url.txt';
 
@@ -546,7 +548,7 @@ describe('ViewerComponent', () => {
             fixture.detectChanges();
 
             expect(getMainLoader()).toBeNull();
-            expect(component.isContentReady).toBeFalse();
+            expect(component.isContentReady).toBeTrue();
         });
     });
 });

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

@@ -29,6 +29,8 @@ import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
 import { TxtViewerComponent } from '../txt-viewer/txt-viewer.component';
 import { UnknownFormatComponent } from '../unknown-format/unknown-format.component';
 
+type ViewerType = 'media' | 'image' | 'pdf' | 'unknown';
+
 @Component({
     selector: 'adf-viewer-render',
     standalone: true,
@@ -141,7 +143,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     extensionsSupportedByTemplates: string[] = [];
     extension: string;
     internalFileName: string;
-    viewerType: string = 'unknown';
+    viewerType: ViewerType = 'unknown';
     isContentReady = false;
 
     /**
@@ -185,19 +187,25 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     }
 
     ngOnChanges() {
-        this.isContentReady = false;
-        this.isLoading = !this.blobFile && !this.urlFile;
+        this.updateLoadingState();
 
         if (this.blobFile) {
             this.setUpBlobData();
         } else if (this.urlFile) {
             this.setUpUrlFile();
         }
+
+        this.updateLoadingState();
+    }
+
+    private updateLoadingState() {
+        this.isContentReady = !(this.viewerType === 'media' || this.viewerType === 'pdf' || this.viewerType === 'image');
+        this.isLoading = !this.blobFile && !this.urlFile;
     }
 
     private setUpBlobData() {
         this.internalFileName = this.fileName;
-        this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
+        this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type) as ViewerType;
 
         this.extensionChange.emit(this.blobFile.type);
         this.scrollTop();
@@ -206,7 +214,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     private setUpUrlFile() {
         this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
         this.extension = this.viewUtilService.getFileExtension(this.internalFileName);
-        this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates);
+        this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates) as ViewerType;
 
         this.extensionChange.emit(this.extension);
         this.scrollTop();