79597: Fix thumbnails ~ item page direct request

src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html

@@ -1,4 +1,4 @@
-<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img'))">
+<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img,.thumbnail-content'))">
   <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
   <div #content class="simple-view-element-body">
     <ng-content></ng-content>

src/app/+item-page/simple/item-types/publication/publication.component.html

@@ -10,7 +10,7 @@
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper>
-        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+        <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">

src/app/+item-page/simple/item-types/shared/item.component.ts

@@ -4,8 +4,10 @@ import { environment } from '../../../../../environments/environment';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
-import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
+import { getFirstSucceededRemoteDataPayload, takeUntilCompletedRemoteData } from '../../../../core/shared/operators';
 import { getItemPageRoute } from '../../../item-page-routing-paths';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { RemoteData } from '../../../../core/data/remote-data';
 
 @Component({
   selector: 'ds-item',
@@ -17,6 +19,11 @@ import { getItemPageRoute } from '../../../item-page-routing-paths';
 export class ItemComponent implements OnInit {
   @Input() object: Item;
 
+  /**
+   * The Item's thumbnail
+   */
+  thumbnail$: BehaviorSubject<RemoteData<Bitstream>>;
+
   /**
    * Route to the item page
    */
@@ -28,12 +35,12 @@ export class ItemComponent implements OnInit {
 
   ngOnInit(): void {
     this.itemPageRoute = getItemPageRoute(this.object);
-  }
 
-  // TODO refactor to return RemoteData, and thumbnail template to deal with loading
+    this.thumbnail$ = new BehaviorSubject<RemoteData<Bitstream>>(undefined);
-  getThumbnail(): Observable<Bitstream> {
+    this.bitstreamDataService.getThumbnailFor(this.object).pipe(
-    return this.bitstreamDataService.getThumbnailFor(this.object).pipe(
+      takeUntilCompletedRemoteData(),
-      getFirstSucceededRemoteDataPayload()
+    ).subscribe((rd: RemoteData<Bitstream>) => {
-    );
+      this.thumbnail$.next(rd);
+    });
   }
 }

src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -10,7 +10,7 @@
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper>
-        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+        <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
       [fields]="['creativeworkseries.issn']"

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -8,7 +8,7 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="getThumbnail() | async">
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
         </ds-thumbnail>
       </div>
     </a>

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"
                     [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                     [alt]="'thumbnail.orgunit.alt'"
                     [placeholder]="'thumbnail.orgunit.placeholder'"

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
                     [placeholder]="'thumbnail.person.placeholder'">

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -10,7 +10,7 @@
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
       <ds-thumbnail
-        [thumbnail]="getThumbnail() | async"
+        [thumbnail]="thumbnail$ | async"
         [defaultImage]="'assets/images/project-placeholder.svg'"
         [alt]="'thumbnail.project.alt'"
         [placeholder]="'thumbnail.project.placeholder'">

src/app/thumbnail/thumbnail.component.html

@@ -1,10 +1,14 @@
 <div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
+  <ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
+    text-content
+  </ds-loading>
+  <ng-template #showThumbnail>
     <img *ngIf="src !== null" class="thumbnail-content img-fluid"
-       [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"/>
+         [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()">
     <div *ngIf="src === null" class="thumbnail-content outer">
       <div class="inner">
         <div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
       </div>
     </div>
+  </ng-template>
 </div>
-

src/app/thumbnail/thumbnail.component.ts

@@ -1,6 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { hasValue } from '../shared/empty.util';
+import { RemoteData } from '../core/data/remote-data';
+import { BITSTREAM } from '../core/shared/bitstream.resource-type';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
@@ -12,11 +14,11 @@ import { hasValue } from '../shared/empty.util';
   styleUrls: ['./thumbnail.component.scss'],
   templateUrl: './thumbnail.component.html',
 })
-export class ThumbnailComponent implements OnInit {
+export class ThumbnailComponent implements OnChanges {
   /**
    * The thumbnail Bitstream
    */
-  @Input() thumbnail: Bitstream;
+  @Input() thumbnail: Bitstream | RemoteData<Bitstream>;
 
   /**
    * The default image, used if the thumbnail isn't set or can't be downloaded.
@@ -27,7 +29,7 @@ export class ThumbnailComponent implements OnInit {
   /**
    * The src attribute used in the template to render the image.
    */
-  src: string;
+  src: string = null;
 
   /**
    * i18n key of thumbnail alt text
@@ -44,18 +46,37 @@ export class ThumbnailComponent implements OnInit {
    */
   @Input() limitWidth? = true;
 
+  isLoading: boolean;
+
   /**
-   * Initialize the thumbnail.
+   * Resolve the thumbnail.
    * Use a default image if no actual image is available.
    */
-  ngOnInit(): void {
+  ngOnChanges(): void {
-    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links)
+    if (this.thumbnail === undefined || this.thumbnail === null) {
-                                 && hasValue(this.thumbnail._links.content)
+      return;
-                                 && this.thumbnail._links.content.href) {
+    }
-      this.src = this.thumbnail._links.content.href;
+    if (this.thumbnail instanceof Bitstream) {
+      this.resolveThumbnail(this.thumbnail as Bitstream)
+    } else {
+      const thumbnailRD = this.thumbnail as RemoteData<Bitstream>;
+      if (thumbnailRD.isLoading) {
+        this.isLoading = true;
+      } else {
+        this.resolveThumbnail(thumbnailRD.payload as Bitstream);
+      }
+    }
+  }
+
+  private resolveThumbnail(thumbnail: Bitstream): void {
+    if (hasValue(thumbnail) && hasValue(thumbnail._links)
+                            && hasValue(thumbnail._links.content)
+                            && thumbnail._links.content.href) {
+      this.src = thumbnail._links.content.href;
     } else {
       this.src = this.defaultImage;
     }
+    this.isLoading = false;
   }
 
   /**