#0 fix thumbnail

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html

@@ -1,3 +1,10 @@
-<div class="thumbnail">
+<div class="thumbnail" *ngVar="src$ | async as src">
-  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)"/>
+  <ds-loading
+    *ngIf="!src"
+    message="{{ 'loading.default' | translate }}"
+    [showMessage]="false"
+  ></ds-loading>
+  <ng-container *ngIf="src">
+    <img [src]="src | dsSafeUrl" (error)="errorHandler($event)" />
+  </ng-container>
 </div>

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { BehaviorSubject, Observable, isObservable } from 'rxjs';
+import { RemoteData } from '../../../core/data/remote-data';
 import { Bitstream } from '../../../core/shared/bitstream.model';
 import { hasValue } from '../../empty.util';
 
@@ -11,30 +13,45 @@ import { hasValue } from '../../empty.util';
 @Component({
   selector: 'ds-grid-thumbnail',
   styleUrls: ['./grid-thumbnail.component.scss'],
-  templateUrl: './grid-thumbnail.component.html'
+  templateUrl: './grid-thumbnail.component.html',
 })
 export class GridThumbnailComponent implements OnInit {
-
+  @Input() thumbnail: string | Observable<RemoteData<Bitstream>>;
-  @Input() thumbnail: Bitstream;
 
   data: any = {};
 
   /**
    * The default 'holder.js' image
    */
-  @Input() defaultImage? = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+  @Input() defaultImage? =
+    'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
 
-  src: string;
+  src$: BehaviorSubject<string>;
   errorHandler(event) {
     event.currentTarget.src = this.defaultImage;
   }
 
   ngOnInit(): void {
-    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links) && this.thumbnail._links.content.href) {
+    this.src$ = new BehaviorSubject<string>(this.defaultImage);
-      this.src = this.thumbnail._links.content.href;
+    console.log('this.thumbnail', this.thumbnail);
+    if (isObservable(this.thumbnail)) {
+      this.thumbnail.subscribe((thumbnailRD) => {
+        this.checkThumbnail(thumbnailRD.payload);
+      });
     } else {
-      this.src = this.defaultImage
+      if (this.thumbnail) {
+        this.src$.next(this.thumbnail);
+      }
     }
   }
 
+  checkThumbnail(thumbnail: Bitstream) {
+    if (
+      hasValue(thumbnail) &&
+      hasValue(thumbnail._links) &&
+      thumbnail._links.content.href
+    ) {
+      this.src$.next(thumbnail._links.content.href);
+    }
+  }
 }

src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html

@@ -4,13 +4,13 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
          class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
+              <ds-grid-thumbnail [thumbnail]="getThumbnail()">
               </ds-grid-thumbnail>
           </div>
       </a>
       <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
+              <ds-grid-thumbnail [thumbnail]="getThumbnail()">
               </ds-grid-thumbnail>
           </div>
       </span>

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts

@@ -6,10 +6,11 @@ import { BitstreamDataService } from '../../../core/data/bitstream-data.service'
 import { Bitstream } from '../../../core/shared/bitstream.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Metadata } from '../../../core/shared/metadata.utils';
-import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
 import { hasValue } from '../../empty.util';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { TruncatableService } from '../../truncatable/truncatable.service';
+import { RemoteData } from '../../../core/data/remote-data';
+import { filter, map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-search-result-grid-element',
@@ -42,7 +43,9 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
    */
   ngOnInit(): void {
     if (hasValue(this.object)) {
+      console.log(this.object)
       this.dso = this.object.indexableObject;
+      console.log('this.dso',this.dso)
     }
   }
 
@@ -71,9 +74,7 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
   }
 
   // TODO refactor to return RemoteData, and thumbnail template to deal with loading
-  getThumbnail(): Observable<Bitstream> {
+  getThumbnail(): Observable<RemoteData<Bitstream>> {
-    return this.bitstreamDataService.getThumbnailFor(this.dso as any).pipe(
+    return this.bitstreamDataService.getThumbnailFor(this.dso as any);
-      getFirstSucceededRemoteDataPayload()
-    );
   }
 }