[CST-3090] fix

src/app/shared/collection-dropdown/collection-dropdown.component.html

@@ -20,7 +20,7 @@
     [infiniteScrollContainer]="'.scrollable-menu'"
     [fromRoot]="true"
     (scrolled)="onScrollDown()">
-    <button class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !isLoadingList">
+    <button class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !(isLoadingList | async)">
       {{'submission.sections.general.no-collection' | translate}}
     </button>
     <button
@@ -35,7 +35,7 @@
         <li class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</li>
       </ul>
     </button>
-    <button class="dropdown-item disabled" *ngIf="isLoadingList" >
+    <button class="dropdown-item disabled" *ngIf="(isLoadingList | async)" >
       <ds-loading message="{{'loading.default' | translate}}">
       </ds-loading>
     </button>

src/app/shared/collection-dropdown/collection-dropdown.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Observable, of, Subscription } from 'rxjs';
+import { Observable, of, Subscription, BehaviorSubject } from 'rxjs';
 import { hasValue, isNotEmpty } from '../empty.util';
-import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators';
 import { RemoteData } from 'src/app/core/data/remote-data';
 import { FindListOptions } from 'src/app/core/data/request.models';
 import { PaginatedList } from 'src/app/core/data/paginated-list';
@@ -11,6 +11,8 @@ import { CollectionDataService } from 'src/app/core/data/collection-data.service
 import { Collection } from '../../core/shared/collection.model';
 import { followLink } from '../utils/follow-link-config.model';
 import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators';
+import { constructor } from 'lodash';
+import { query } from '@angular/animations';
 /**
  * An interface to represent a collection entry
  */
@@ -74,7 +76,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
   /**
    * A boolean representing if the loader is visible or not
    */
-  isLoadingList: boolean;
+  isLoadingList: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * A numeric representig current page
@@ -91,6 +93,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
    */
   currentQuery: string;
 
+  hideLoaderWhenUnsubscribed$ = new Observable(() => () => this.hideShowLoader(false) );
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private collectionDataService: CollectionDataService,
@@ -118,7 +122,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
    */
   ngOnInit() {
     this.subs.push(this.searchField.valueChanges.pipe(
-        debounceTime(200),
+        debounceTime(300),
         distinctUntilChanged(),
         startWith('')
       ).subscribe(
@@ -168,8 +172,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
    * @param query text for filter the collection list
    * @param page page number
    */
-  populateCollectionList(query?: string, page?: number) {
-    this.isLoadingList = true;
+  populateCollectionList(query: string, page: number) {
+    this.isLoadingList.next(true);
     // Set the pagination info
     const findOptions: FindListOptions = {
       elementsPerPage: 10,
@@ -179,7 +183,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
       .getAuthorizedCollection(query, findOptions, followLink('parentCommunity'))
       .pipe(
         getSucceededRemoteWithNotEmptyData(),
-        mergeMap((collections: RemoteData<PaginatedList<Collection>>) => {
+        switchMap((collections: RemoteData<PaginatedList<Collection>>) => {
           if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) {
             this.hasNextPage = false;
           }
@@ -192,12 +196,13 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
             collection: { id: collection.id, uuid: collection.id, name: collection.name }
           })
         ))),
-        reduce((acc: any, value: any) => [...acc, ...value], []),
-        startWith([])
+        scan((acc: any, value: any) => [...acc, ...value], []),
+        startWith([]),
+        merge(this.hideLoaderWhenUnsubscribed$)
         );
     this.subs.push(this.searchListCollection$.subscribe(
       (next) => { this.searchListCollection.push(...next); }, undefined,
-      () => { this.isLoadingList = false; this.changeDetectorRef.detectChanges(); }
+      () => { this.hideShowLoader(false); this.changeDetectorRef.detectChanges(); }
     ));
   }
 
@@ -224,4 +229,12 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
     this.hasNextPage = true;
     this.searchListCollection = [];
   }
+
+  /**
+   * Hide/Show the collection list loader
+   * @param hideShow true for show, false otherwise
+   */
+  hideShowLoader(hideShow: boolean) {
+    this.isLoadingList.next(hideShow);
+  }
 }