62589: Loading components for item and collection select lists

resources/i18n/en.json5

@@ -198,9 +198,11 @@
 
   "error.browse-by": "Error fetching items",
   "error.collection": "Error fetching collection",
+  "error.collections": "Error fetching collections",
   "error.community": "Error fetching community",
   "error.default": "Error",
   "error.item": "Error fetching item",
+  "error.items": "Error fetching items",
   "error.objects": "Error fetching objects",
   "error.recent-submissions": "Error fetching recent submissions",
   "error.search-results": "Error fetching search results",
@@ -430,9 +432,11 @@
   "loading.browse-by": "Loading items...",
   "loading.browse-by-page": "Loading page...",
   "loading.collection": "Loading collection...",
+  "loading.collections": "Loading collections...",
   "loading.community": "Loading community...",
   "loading.default": "Loading...",
   "loading.item": "Loading item...",
+  "loading.items": "Loading items...",
   "loading.mydspace-results": "Loading items...",
   "loading.objects": "Loading...",
   "loading.recent-submissions": "Loading recent submissions...",

src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.ts

@@ -8,7 +8,7 @@ import { Collection } from '../../core/shared/collection.model';
 import { SearchConfigurationService } from '../../+search-page/search-service/search-configuration.service';
 import { PaginatedSearchOptions } from '../../+search-page/paginated-search-options.model';
 import { PaginatedList } from '../../core/data/paginated-list';
-import { map, switchMap, take, tap } from 'rxjs/operators';
+import { map, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { getRemoteDataPayload, getSucceededRemoteData, toDSpaceObjectListRD } from '../../core/shared/operators';
 import { SearchService } from '../../+search-page/search-service/search.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
@@ -128,10 +128,12 @@ export class CollectionItemMapperComponent implements OnInit {
               scope: undefined,
               dsoType: DSpaceObjectType.ITEM,
               sort: this.defaultSortOptions
-            }));
+            })).pipe(
+              toDSpaceObjectListRD(),
+              startWith(undefined)
+            );
           }
-      }),
-      toDSpaceObjectListRD()
+      })
     );
   }
 

src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.ts

@@ -11,7 +11,7 @@ import { getRemoteDataPayload, getSucceededRemoteData, toDSpaceObjectListRD } fr
 import { ActivatedRoute, Router } from '@angular/router';
 import { SearchService } from '../../../+search-page/search-service/search.service';
 import { SearchConfigurationService } from '../../../+search-page/search-service/search-configuration.service';
-import { map, switchMap, take } from 'rxjs/operators';
+import { map, startWith, switchMap, take } from 'rxjs/operators';
 import { ItemDataService } from '../../../core/data/item-data.service';
 import { TranslateService } from '@ngx-translate/core';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -112,9 +112,11 @@ export class ItemCollectionMapperComponent implements OnInit {
         return this.searchService.search(Object.assign(new PaginatedSearchOptions(searchOptions), {
           query: this.buildQuery([...itemCollectionsRD.payload.page, owningCollectionRD.payload], searchOptions.query),
           dsoType: DSpaceObjectType.COLLECTION
-        }));
-      }),
-      toDSpaceObjectListRD()
+        })).pipe(
+          toDSpaceObjectListRD(),
+          startWith(undefined)
+        );
+      })
     ) as Observable<RemoteData<PaginatedList<Collection>>>;
   }
 

src/app/shared/object-select/collection-select/collection-select.component.html

@@ -24,6 +24,8 @@
       </table>
     </div>
   </ds-pagination>
+  <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
+  <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
   <div>
     <button class="btn btn-outline-secondary collection-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
     <button *ngIf="dangerConfirm" class="btn btn-danger collection-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>

src/app/shared/object-select/item-select/item-select.component.html

@@ -28,6 +28,8 @@
       </table>
     </div>
   </ds-pagination>
+  <ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
+  <ds-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-loading>
   <div>
     <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
     <button *ngIf="dangerConfirm" class="btn btn-danger item-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>