64961: Proper loading of edit-bitstream page

resources/i18n/en.json5

@@ -193,6 +193,7 @@
   "dso-selector.no-results": "No {{ type }} found",
   "dso-selector.placeholder": "Search for a {{ type }}",
 
+  "error.bitstream": "Error fetching bitstream",
   "error.browse-by": "Error fetching items",
   "error.collection": "Error fetching collection",
   "error.community": "Error fetching community",

src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html

@@ -1,26 +1,29 @@
-<div class="container">
+<ng-container *ngVar="(bitstreamRD$ | async) as bitstreamRD">
-  <div class="row" *ngIf="bitstream">
+  <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
-    <div class="col-md-2">
+    <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
-      <ds-thumbnail [thumbnail]="bitstream"></ds-thumbnail>
+      <div class="col-md-2">
-    </div>
+        <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
-    <div class="col-md-10">
+      </div>
-      <div class="container">
+      <div class="col-md-10">
-        <div class="row">
+        <div class="container">
-          <div class="col-12">
+          <div class="row">
-            <h3>{{bitstream?.name}} <span class="text-muted">({{bitstream?.sizeBytes | dsFileSize}})</span></h3>
+            <div class="col-12">
+              <h3>{{bitstreamRD?.payload?.name}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h3>
+            </div>
           </div>
         </div>
+        <ds-form  [formId]="'edit-bitstream-form-id'"
+                  [formGroup]="formGroup"
+                  [formModel]="formModel"
+                  [formLayout]="formLayout"
+                  [submitLabel]="'form.save'"
+                  (submitForm)="onSubmit()"
+                  (cancel)="onCancel()"
+                  (dfChange)="onChange($event)"></ds-form>
       </div>
-      <ds-form  *ngIf="bitstream"
-                [formId]="'edit-bitstream-form-id'"
-                [formGroup]="formGroup"
-                [formModel]="formModel"
-                [formLayout]="formLayout"
-                [submitLabel]="'form.save'"
-                (submitForm)="onSubmit()"
-                (cancel)="onCancel()"
-                (dfChange)="onChange($event)"></ds-form>
     </div>
+    <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
+    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+                message="{{'loading.bitstream' | translate}}"></ds-loading>
   </div>
-  <ds-loading *ngIf="!bitstream" message="{{'loading.bitstream' | translate}}"></ds-loading>
+</ng-container>
-</div>

src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { ActivatedRoute } from '@angular/router';
-import { filter, map, switchMap, take, tap } from 'rxjs/operators';
+import { filter, map, switchMap } from 'rxjs/operators';
 import { combineLatest as observableCombineLatest, of as observableOf } from 'rxjs';
 import { Subscription } from 'rxjs/internal/Subscription';
 import {
@@ -29,9 +29,12 @@ import { BitstreamFormatDataService } from '../../core/data/bitstream-format-dat
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
 import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level';
 import { RestResponse } from '../../core/cache/response.models';
-import { hasValue, isNotEmpty, isNotEmptyOperator } from '../../shared/empty.util';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { Metadata } from '../../core/shared/metadata.utils';
 import { Location } from '@angular/common';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list';
 
 @Component({
   selector: 'ds-edit-bitstream-page',
@@ -44,6 +47,18 @@ import { Location } from '@angular/common';
  */
 export class EditBitstreamPageComponent implements OnInit, OnDestroy {
 
+  /**
+   * The bitstream's remote data observable
+   * Tracks changes and updates the view
+   */
+  bitstreamRD$: Observable<RemoteData<Bitstream>>;
+
+  /**
+   * The formats their remote data observable
+   * Tracks changes and updates the view
+   */
+  bitstreamFormatsRD$: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
+
   /**
    * The bitstream to edit
    */
@@ -274,8 +289,10 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.formGroup = this.formService.createFormGroup(this.formModel);
 
-    const bitstream$ = this.route.data.pipe(
+    this.bitstreamRD$ = this.route.data.pipe(map((data) => data.bitstream));
-      map((data) => data.bitstream),
+    this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions);
+
+    const bitstream$ = this.bitstreamRD$.pipe(
       getSucceededRemoteData(),
       getRemoteDataPayload(),
       switchMap((bitstream: Bitstream) => this.bitstreamService.findById(bitstream.id).pipe(
@@ -285,7 +302,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       )
     );
 
-    const allFormats$ = this.bitstreamFormatService.findAll(this.findAllOptions).pipe(
+    const allFormats$ = this.bitstreamFormatsRD$.pipe(
       getSucceededRemoteData(),
       getRemoteDataPayload()
     );