108588: Fixed browse by issue date show loading icon indefinitely when empty

Author: alexandrevryghem

src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts

@@ -23,6 +23,7 @@ import { PaginationServiceStub } from '../../shared/testing/pagination-service.s
 import { APP_CONFIG } from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
+import { cold } from 'jasmine-marbles';
 
 describe('BrowseByDateComponent', () => {
   let comp: BrowseByDateComponent;
@@ -112,9 +113,13 @@ describe('BrowseByDateComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should initialize the list of items', () => {
+  it('should initialize the list of items', (done: DoneFn) => {
+    expect(comp.loading$).toBeObservable(cold('(a|)', {
+      a: false,
+    }));
     comp.items$.subscribe((result) => {
       expect(result.payload.page).toEqual([firstItem]);
+      done();
     });
   });
 

src/app/browse-by/browse-by-date/browse-by-date.component.ts

@@ -1,10 +1,6 @@
 import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
-import {
-  BrowseByMetadataComponent,
-  browseParamsToOptions,
-  getBrowseSearchOptions
-} from '../browse-by-metadata/browse-by-metadata.component';
-import { combineLatest as observableCombineLatest } from 'rxjs';
+import { BrowseByMetadataComponent, browseParamsToOptions, getBrowseSearchOptions } from '../browse-by-metadata/browse-by-metadata.component';
+import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
@@ -87,12 +83,21 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements
    * @param scope           The scope under which to fetch the earliest item for
    */
   updateStartsWithOptions(definition: string, metadataKeys: string[], scope?: string) {
-    const firstItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
-    const lastItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    const firstItemRD$: Observable<RemoteData<Item>> = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
+    const lastItemRD$: Observable<RemoteData<Item>> = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    this.loading$ = observableCombineLatest([
+      firstItemRD$,
+      lastItemRD$,
+    ]).pipe(
+      map(([firstItemRD, lastItemRD]: [RemoteData<Item>, RemoteData<Item>]) => firstItemRD.isLoading || lastItemRD.isLoading)
+    );
     this.subs.push(
-      observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        let upperLimit = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+      observableCombineLatest([
+        firstItemRD$,
+        lastItemRD$,
+      ]).subscribe(([firstItemRD, lastItemRD]: [RemoteData<Item>, RemoteData<Item>]) => {
+        let lowerLimit = this.getLimit(firstItemRD, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
+        let upperLimit = this.getLimit(lastItemRD, metadataKeys, new Date().getUTCFullYear());
         const options = [];
         const oneYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
         const fiveYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html

@@ -1,6 +1,6 @@
 <section class="comcol-page-browse-section">
   <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+    <ds-browse-by *ngIf="!(loading$ | async)" class="col-xs-12 w-100"
                   title="{{'browse.title' | translate:{
                     field: 'browse.metadata.' + browseId | translate,
                     startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
@@ -15,7 +15,7 @@
                   (prev)="goPrev()"
                   (next)="goNext()">
     </ds-browse-by>
-    <ds-themed-loading *ngIf="!startsWithOptions"
+    <ds-themed-loading *ngIf="loading$ | async"
                        message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
 </section>

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts

@@ -30,6 +30,7 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { APP_CONFIG } from '../../../config/app-config.interface';
+import { cold } from 'jasmine-marbles';
 
 describe('BrowseByMetadataComponent', () => {
   let comp: BrowseByMetadataComponent;
@@ -147,9 +148,13 @@ describe('BrowseByMetadataComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should fetch items', () => {
+    it('should fetch items', (done: DoneFn) => {
+      expect(comp.loading$).toBeObservable(cold('(a|)', {
+        a: false,
+      }));
       comp.items$.subscribe((result) => {
         expect(result.payload.page).toEqual(mockItems);
+        done();
       });
     });
   });

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription, of as observableOf } from 'rxjs';
 import { Component, Inject, OnInit, OnDestroy, Input, OnChanges } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
@@ -133,6 +133,11 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   fetchThumbnails: boolean;
 
+  /**
+   * Observable determining if the loading animation needs to be shown
+   */
+  loading$ = observableOf(true);
+
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
@@ -207,6 +212,9 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   updatePage(searchOptions: BrowseEntrySearchOptions) {
     this.browseEntries$ = this.browseService.getBrowseEntriesFor(searchOptions);
+    this.loading$ = this.browseEntries$.pipe(
+      map((browseEntriesRD: RemoteData<PaginatedList<BrowseEntry>>) => browseEntriesRD.isLoading),
+    );
     this.items$ = undefined;
   }
 
@@ -221,6 +229,9 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   updatePageWithItems(searchOptions: BrowseEntrySearchOptions, value: string, authority: string) {
     this.items$ = this.browseService.getBrowseItemsFor(value, authority, searchOptions);
+    this.loading$ = this.items$.pipe(
+      map((itemsRD: RemoteData<PaginatedList<Item>>) => itemsRD.isLoading),
+    );
   }
 
   /**