AAE-34641 Refactor viewer-render loading (#10868)

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

@@ -4,9 +4,11 @@
         <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>
+                    <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/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$ | async" 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" />
+<ng-container *ngIf="urlFile || blobFile">
+    <div [hidden]="isLoading$ | async" 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>
 <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({
@@ -483,14 +483,16 @@ describe('ViewerComponent', () => {
     describe('Spinner', () => {
         const getMainLoader = (): DebugElement => testingUtils.getByCSS('.adf-viewer-render-main-loader');
 
-        it('should show spinner when isLoading is true', () => {
-            component.isLoading = true;
-            fixture.detectChanges();
-            expect(getMainLoader()).not.toBeNull();
+        it('should not show spinner by default', (done) => {
+            component.isLoading$.subscribe((isLoading) => {
+                fixture.detectChanges();
+                expect(isLoading).toBeFalse();
+                expect(getMainLoader()).toBeNull();
+                done();
+            });
         });
 
-        it('should show spinner until content is ready when viewerType is media', () => {
-            component.isLoading = false;
+        it('should display spinner when viewerType is media', () => {
             component.urlFile = 'some-file.mp4';
 
             component.ngOnChanges();
@@ -506,24 +508,21 @@ 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');
         });
 
-        it('should show spinner until content is ready when viewerType is image', () => {
-            component.isLoading = false;
+        it('should display spinner when viewerType is image', () => {
             component.urlFile = 'some-url.png';
 
             component.ngOnChanges();
@@ -537,16 +536,5 @@ describe('ViewerComponent', () => {
             expect(getMainLoader()).toBeNull();
             expect(component.viewerType).toBe('image');
         });
-
-        it('should not show spinner when isLoading = false and isContentReady = false for other viewer types', () => {
-            component.isLoading = false;
-            component.urlFile = 'some-url.txt';
-
-            component.ngOnChanges();
-            fixture.detectChanges();
-
-            expect(getMainLoader()).toBeNull();
-            expect(component.isContentReady).toBeFalse();
-        });
     });
 });

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

@@ -16,7 +16,7 @@
  */
 
 import { AppExtensionService, ExtensionsModule, ViewerExtensionRef } from '@alfresco/adf-extensions';
-import { NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
 import { Component, EventEmitter, Injector, Input, OnChanges, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -28,6 +28,9 @@ import { MediaPlayerComponent } from '../media-player/media-player.component';
 import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
 import { TxtViewerComponent } from '../txt-viewer/txt-viewer.component';
 import { UnknownFormatComponent } from '../unknown-format/unknown-format.component';
+import { BehaviorSubject } from 'rxjs';
+
+type ViewerType = 'media' | 'image' | 'pdf' | 'external' | 'text' | 'custom' | 'unknown';
 
 @Component({
     selector: 'adf-viewer-render',
@@ -50,7 +53,8 @@ import { UnknownFormatComponent } from '../unknown-format/unknown-format.compone
         UnknownFormatComponent,
         ExtensionsModule,
         NgForOf,
-        NgSwitchDefault
+        NgSwitchDefault,
+        AsyncPipe
     ],
     providers: [ViewUtilService]
 })
@@ -86,10 +90,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;
@@ -141,8 +141,8 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
     extensionsSupportedByTemplates: string[] = [];
     extension: string;
     internalFileName: string;
-    viewerType: string = 'unknown';
-    isContentReady = false;
+    viewerType: ViewerType = 'unknown';
+    readonly isLoading$ = new BehaviorSubject(false);
 
     /**
      * Returns a list of the active Viewer content extensions.
@@ -182,12 +182,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,9 +193,13 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
         }
     }
 
+    markAsLoaded() {
+        this.isLoading$.next(false);
+    }
+
     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 +208,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();
@@ -235,4 +237,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$.next(true);
+        }
+    }
 }