[DSC-1652] add warning and error messages to loader component

Author: Andrea Barbasso

src/app/shared/loading/loading.component.html

@@ -1,18 +1,28 @@
-<div *ngIf="!spinner">
-  <label *ngIf="showMessage && message">{{ message }}</label>
-  <div class="loader">
-    <span class="l-1"></span>
-    <span class="l-2"></span>
-    <span class="l-3"></span>
-    <span class="l-4"></span>
-    <span class="l-5"></span>
-    <span class="l-6"></span>
-    <span class="l-7"></span>
-    <span class="l-8"></span>
-    <span class="l-9"></span>
-    <span class="l-10"></span>
-  </div>
-</div>
-<div *ngIf='spinner' class="spinner spinner-border" role="status">
-  <span class="sr-only">{{ message }}</span>
+<div [ngSwitch]="messageToShow">
+  <ng-container *ngSwitchCase="MessageType.LOADING">
+    <label *ngIf="message">{{ message }}</label>
+  </ng-container>
+  <ng-container *ngSwitchCase="MessageType.WARNING">
+    <label *ngIf="warningMessage">{{ warningMessage }}</label>
+  </ng-container>
+  <ng-container *ngSwitchCase="MessageType.ERROR">
+    <ds-alert *ngIf="errorMessage" [type]="AlertTypeEnum.Error" [content]="errorMessage"></ds-alert>
+  </ng-container>
+  <ng-container *ngIf="!spinner && messageToShow !== MessageType.ERROR">
+    <div class="loader">
+      <span class="l-1"></span>
+      <span class="l-2"></span>
+      <span class="l-3"></span>
+      <span class="l-4"></span>
+      <span class="l-5"></span>
+      <span class="l-6"></span>
+      <span class="l-7"></span>
+      <span class="l-8"></span>
+      <span class="l-9"></span>
+      <span class="l-10"></span>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="spinner && messageToShow !== MessageType.ERROR" class="spinner spinner-border" role="status">
+    <span class="sr-only">{{ message }}</span>
+  </ng-container>
 </div>

src/app/shared/loading/loading.component.spec.ts

@@ -35,10 +35,10 @@ describe('LoadingComponent (inline template)', () => {
 
     comp = fixture.componentInstance; // LoadingComponent test instance
     comp.message = 'test message';
+    comp.warningMessage = 'test warning message';
+    comp.errorMessage = 'test error message';
+
     fixture.detectChanges();
-    // query for the message <label> by CSS element selector
-    de = fixture.debugElement.query(By.css('label'));
-    el = de.nativeElement;
   });
 
   it('should create', () => {
@@ -47,13 +47,32 @@ describe('LoadingComponent (inline template)', () => {
 
   it('should display default message', () => {
     fixture.detectChanges();
+    de = fixture.debugElement.query(By.css('label'));
+    el = de.nativeElement;
     expect(el.textContent).toContain(comp.message);
   });
 
   it('should display input message', () => {
     comp.message = 'Test Message';
     fixture.detectChanges();
+    de = fixture.debugElement.query(By.css('label'));
+    el = de.nativeElement;
     expect(el.textContent).toContain('Test Message');
   });
 
+  it('should display warning message when MessageType WARNING is set as messageToShow', () => {
+    comp.messageToShow = comp.MessageType.WARNING;
+    fixture.detectChanges();
+    de = fixture.debugElement.query(By.css('label'));
+    el = de.nativeElement;
+    expect(el.textContent).toContain(comp.warningMessage);
+  });
+
+  it('should display ds-alert when MessageType ERROR is set as messageToShow', () => {
+    comp.messageToShow = comp.MessageType.ERROR;
+    fixture.detectChanges();
+    de = fixture.debugElement.query(By.css('ds-alert'));
+    expect(de).toBeTruthy();
+  });
+
 });

src/app/shared/loading/loading.component.ts

@@ -1,9 +1,17 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 
 import { TranslateService } from '@ngx-translate/core';
 
 import { Subscription } from 'rxjs';
 import { hasValue } from '../empty.util';
+import { environment } from '../../../environments/environment';
+import { AlertType } from '../alert/alert-type';
+
+enum MessageType {
+  LOADING = 'loading',
+  WARNING = 'warning',
+  ERROR = 'error'
+}
 
 @Component({
   selector: 'ds-loading',
@@ -15,29 +23,74 @@ export class LoadingComponent implements OnDestroy, OnInit {
   @Input() message: string;
   @Input() showMessage = true;
 
+  @Input() enableFallbackMessages = environment.loader.enableFallbackMessagesByDefault;
+  @Input() warningMessage: string;
+  @Input() warningMessageDelay = environment.loader.warningMessageDelay;
+  @Input() errorMessage: string;
+  @Input() errorMessageDelay = environment.loader.errorMessageDelay;
+
   /**
    * Show a more compact spinner animation instead of the default one
    */
   @Input() spinner = false;
 
-  private subscription: Subscription;
+  readonly MessageType = MessageType;
+  messageToShow: MessageType = this.showMessage ? MessageType.LOADING : undefined;
+
+  private subscriptions: Subscription[] = [];
+
+  warningTimeout: any;
+  errorTimeout: any;
+
+  readonly AlertTypeEnum = AlertType;
 
-  constructor(private translate: TranslateService) {
+  constructor(private translate: TranslateService, private changeDetectorRef: ChangeDetectorRef) {
 
   }
 
   ngOnInit() {
-    if (this.message === undefined) {
-      this.subscription = this.translate.get('loading.default').subscribe((message: string) => {
+    if (this.showMessage && this.message === undefined) {
+      this.subscriptions.push(this.translate.get('loading.default').subscribe((message: string) => {
         this.message = message;
-      });
+      }));
+    }
+    if (this.enableFallbackMessages) {
+      if (!this.warningMessage) {
+        this.subscriptions.push(this.translate.get('loading.warning').subscribe((warningMessage: string) => {
+          this.warningMessage = warningMessage;
+        }));
+      }
+      if (!this.errorMessage) {
+        this.subscriptions.push(this.translate.get('loading.error').subscribe((errorMessage: string) => {
+          this.errorMessage = errorMessage;
+        }));
+      }
+      if (this.warningMessageDelay > 0) {
+        this.warningTimeout = setTimeout(() => {
+          this.messageToShow = MessageType.WARNING;
+          this.changeDetectorRef.detectChanges();
+        }, this.warningMessageDelay);
+      }
+      if (this.errorMessageDelay > 0) {
+        this.errorTimeout = setTimeout(() => {
+          this.messageToShow = MessageType.ERROR;
+          this.changeDetectorRef.detectChanges();
+        }, this.errorMessageDelay);
+      }
     }
   }
 
   ngOnDestroy() {
-    if (hasValue(this.subscription)) {
-      this.subscription.unsubscribe();
+    if (this.subscriptions.length > 0) {
+      this.subscriptions.forEach((sub) => {
+        sub.unsubscribe();
+      });
+    }
+    if (hasValue(this.warningTimeout)) {
+      clearTimeout(this.warningTimeout);
+    }
+    if (hasValue(this.errorTimeout)) {
+      clearTimeout(this.errorTimeout);
     }
   }
-
 }

src/assets/i18n/en.json5

@@ -3677,6 +3677,10 @@
 
   "loading.default": "Loading...",
 
+  "loading.warning": "This is taking longer than expected. Please be patient.",
+
+  "loading.error": "An error occurred while loading the page. Please refresh the page and try again.",
+
   "loading.item": "Loading item...",
 
   "loading.items": "Loading items...",

src/assets/i18n/it.json5

@@ -5372,6 +5372,12 @@
   // "loading.default": "Loading...",
   "loading.default": "Caricamento...",
 
+  // "loading.warning": "This is taking longer than expected. Please be patient.",
+  "loading.warning": "Il caricamento sta richiedendo più tempo del previsto. Si prega di attendere.",
+
+  // "loading.error": "An error occurred while loading the page. Please refresh the page and try again.",
+  "loading.error": "Si è verificato un errore durante il caricamento della pagina. Si prega di aggiornare la pagina e riprovare.",
+
   // "loading.item": "Loading item...",
   "loading.item": "Caricamento articolo...",
 

src/config/app-config.interface.ts

@@ -32,6 +32,7 @@ import { AdvancedAttachmentRenderingConfig } from './advanced-attachment-renderi
 import { AttachmentRenderingConfig } from './attachment-rendering.config';
 import { SearchResultConfig } from './search-result-config.interface';
 import { MiradorConfig } from './mirador-config.interfaces';
+import { LoaderConfig } from './loader-config.interfaces';
 
 interface AppConfig extends Config {
   ui: UIServerConfig;
@@ -70,6 +71,7 @@ interface AppConfig extends Config {
   advancedAttachmentRendering: AdvancedAttachmentRenderingConfig;
   searchResult: SearchResultConfig;
   mirador: MiradorConfig;
+  loader: LoaderConfig;
 }
 
 /**

src/config/default-app-config.ts

@@ -35,6 +35,7 @@ import {
 import { AttachmentRenderingConfig } from './attachment-rendering.config';
 import { SearchResultConfig } from './search-result-config.interface';
 import { MiradorConfig } from './mirador-config.interfaces';
+import { LoaderConfig } from './loader-config.interfaces';
 
 export class DefaultAppConfig implements AppConfig {
   production = false;
@@ -760,4 +761,10 @@ export class DefaultAppConfig implements AppConfig {
   mirador: MiradorConfig = {
     enableDownloadPlugin: true,
   };
+
+  loader: LoaderConfig = {
+    enableFallbackMessagesByDefault: false,
+    warningMessageDelay: 10000, // 10 seconds
+    errorMessageDelay: 30000, // 30 seconds
+  };
 }

src/config/loader-config.interfaces.ts

@@ -0,0 +1,7 @@
+import { Config } from './config.interface';
+
+export interface LoaderConfig extends Config {
+  enableFallbackMessagesByDefault: boolean;
+  warningMessageDelay: number;
+  errorMessageDelay: number;
+}

src/environments/environment.test.ts

@@ -577,4 +577,10 @@ export const environment: BuildConfig = {
   mirador: {
     enableDownloadPlugin: true,
   },
+
+  loader: {
+    enableFallbackMessagesByDefault: true,
+    warningMessageDelay: 1000,
+    errorMessageDelay: 2000,
+  },
 };