diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html
index 4e29fbb6e81..e03c8adf912 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="registryService.getActiveMetadataField() | async; then editheader; else createHeader"></div>
+<div *ngIf="activeMetadataField$ | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
     <h4>{{messagePrefix + '.create' | translate}}</h4>
diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
index 773e0600fbf..77c5d563789 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
@@ -10,7 +10,7 @@ import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { take } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable } from 'rxjs';
 import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
 import { MetadataField } from '../../../../core/metadata/metadata-field.model';
 
@@ -89,6 +89,8 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
    */
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
+  activeMetadataField$: Observable<MetadataField>;
+
   constructor(public registryService: RegistryService,
               private formBuilderService: FormBuilderService,
               private translateService: TranslateService) {
@@ -97,70 +99,65 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * Initialize the component, setting up the necessary Models for the dynamic form
    */
-  ngOnInit() {
-    combineLatest([
-      this.translateService.get(`${this.messagePrefix}.element`),
-      this.translateService.get(`${this.messagePrefix}.qualifier`),
-      this.translateService.get(`${this.messagePrefix}.scopenote`)
-    ]).subscribe(([element, qualifier, scopenote]) => {
-      this.element = new DynamicInputModel({
-        id: 'element',
-        label: element,
-        name: 'element',
-        validators: {
-          required: null,
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: true,
-        errorMessages: {
-          pattern: 'error.validation.metadata.element.invalid-pattern',
-          maxLength: 'error.validation.metadata.element.max-length',
-        },
-      });
-      this.qualifier = new DynamicInputModel({
-        id: 'qualifier',
-        label: qualifier,
-        name: 'qualifier',
-        validators: {
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: false,
-        errorMessages: {
-          pattern: 'error.validation.metadata.qualifier.invalid-pattern',
-          maxLength: 'error.validation.metadata.qualifier.max-length',
-        },
-      });
-      this.scopeNote = new DynamicInputModel({
-        id: 'scopeNote',
-        label: scopenote,
-        name: 'scopeNote',
-        required: false,
-      });
-      this.formModel = [
-        new DynamicFormGroupModel(
-        {
-          id: 'metadatadatafieldgroup',
-          group:[this.element, this.qualifier, this.scopeNote]
-        })
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
-        if (field == null) {
-          this.clearFields();
-        } else {
-          this.formGroup.patchValue({
-            metadatadatafieldgroup: {
-              element: field.element,
-              qualifier: field.qualifier,
-              scopeNote: field.scopeNote,
-            },
-          });
-          this.element.disabled = true;
-          this.qualifier.disabled = true;
-        }
-      });
+  ngOnInit(): void {
+    this.activeMetadataField$ = this.registryService.getActiveMetadataField();
+    this.element = new DynamicInputModel({
+      id: 'element',
+      label: this.translateService.instant(`${this.messagePrefix}.element`),
+      name: 'element',
+      validators: {
+        required: null,
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: true,
+      errorMessages: {
+        pattern: 'error.validation.metadata.element.invalid-pattern',
+        maxLength: 'error.validation.metadata.element.max-length',
+      },
+    });
+    this.qualifier = new DynamicInputModel({
+      id: 'qualifier',
+      label: this.translateService.instant(`${this.messagePrefix}.qualifier`),
+      name: 'qualifier',
+      validators: {
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: false,
+      errorMessages: {
+        pattern: 'error.validation.metadata.qualifier.invalid-pattern',
+        maxLength: 'error.validation.metadata.qualifier.max-length',
+      },
+    });
+    this.scopeNote = new DynamicInputModel({
+      id: 'scopeNote',
+      label: this.translateService.instant(`${this.messagePrefix}.scopenote`),
+      name: 'scopeNote',
+      required: false,
+    });
+    this.formModel = [
+      new DynamicFormGroupModel(
+      {
+        id: 'metadatadatafieldgroup',
+        group:[this.element, this.qualifier, this.scopeNote]
+      })
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
+      if (field == null) {
+        this.clearFields();
+      } else {
+        this.formGroup.patchValue({
+          metadatadatafieldgroup: {
+            element: field.element,
+            qualifier: field.qualifier,
+            scopeNote: field.scopeNote,
+          },
+        });
+        this.element.disabled = true;
+        this.qualifier.disabled = true;
+      }
     });
   }
 
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index d6fd77e79bb..27a9499c91a 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -28,8 +28,8 @@
               [title]="'toggle ' + dsoNameService.getName(node.payload)"
               [attr.aria-label]="'toggle ' + dsoNameService.getName(node.payload)"
               (click)="toggleExpanded(node)"
-              [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'"
-              [attr.data-test]="(hasChild(null, node)| async) ? 'expand-button' : ''">
+              [ngClass]="(node.isExpandable$ | async) === true ? 'visible' : 'invisible'"
+              [attr.data-test]="(node.isExpandable$ | async) === true ? 'expand-button' : ''">
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
       </button>
diff --git a/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.html b/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.html
index 7f121081f2c..7569ebd6e33 100644
--- a/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.html
+++ b/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.html
@@ -1,9 +1,9 @@
 <div class="container">
-  <ds-alert [type]="'alert-info'" [content]="'item.edit.authorizations.heading'"></ds-alert>
-  <ds-resource-policies [resourceType]="'item'" [resourceName]="(getItemName() | async)"
-    [resourceUUID]="(getItemUUID() | async)">
+  <ds-alert [type]="AlertType.Info" [content]="'item.edit.authorizations.heading'"></ds-alert>
+  <ds-resource-policies [resourceType]="'item'" [resourceName]="itemName$ | async"
+    [resourceUUID]="(item$ | async)?.id">
   </ds-resource-policies>
-  <ng-container *ngFor="let bundle of (bundles$ | async); trackById">
+  <ng-container *ngFor="let bundle of (bundles$ | async)">
     <ds-resource-policies [resourceType]="'bundle'" [resourceUUID]="bundle.id" [resourceName]="bundle.name">
     </ds-resource-policies>
     <ng-container *ngIf="(bundleBitstreamsMap.get(bundle.id)?.bitstreams | async)?.length > 0">
@@ -16,7 +16,7 @@
         </div>
         <div class="card-body" [id]="bundle.id" [ngbCollapse]="bundleBitstreamsMap.get(bundle.id).isCollapsed">
           <ng-container
-            *ngFor="let bitstream of (bundleBitstreamsMap.get(bundle.id).bitstreams | async); trackById">
+            *ngFor="let bitstream of (bundleBitstreamsMap.get(bundle.id).bitstreams | async)">
             <ds-resource-policies [resourceType]="'bitstream'" [resourceUUID]="bitstream.id"
               [resourceName]="bitstream.name"></ds-resource-policies>
           </ng-container>
diff --git a/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.spec.ts b/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.spec.ts
index 5d2afbaf4ce..ee4ddb1fabf 100644
--- a/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.spec.ts
@@ -147,14 +147,6 @@ describe('ItemAuthorizationsComponent test suite', () => {
       }));
     });
 
-    it('should get the item UUID', () => {
-
-      expect(comp.getItemUUID()).toBeObservable(cold('(a|)', {
-        a: item.id
-      }));
-
-    });
-
     it('should get the item\'s bundle', () => {
 
       expect(comp.getItemBundles()).toBeObservable(cold('a', {
diff --git a/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.ts b/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.ts
index 635cf455b55..5a5c3213847 100644
--- a/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.ts
+++ b/src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.ts
@@ -4,7 +4,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
-import { catchError, filter, first, map, mergeMap, take } from 'rxjs/operators';
+import { catchError, filter, map, mergeMap, take } from 'rxjs/operators';
 
 import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
 import {
@@ -17,6 +17,7 @@ import { LinkService } from '../../../core/cache/builders/link.service';
 import { Bundle } from '../../../core/shared/bundle.model';
 import { hasValue, isNotEmpty } from '../../../shared/empty.util';
 import { Bitstream } from '../../../core/shared/bitstream.model';
+import { AlertType } from '../../../shared/alert/aletr-type';
 
 /**
  * Interface for a bundle's bitstream map entry
@@ -52,7 +53,7 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    * The target editing item
    * @type {Observable<Item>}
    */
-  private item$: Observable<Item>;
+  item$: Observable<Item>;
 
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
@@ -91,16 +92,13 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    */
   private bitstreamPageSize = 4;
 
-  /**
-   * Initialize instance variables
-   *
-   * @param {LinkService} linkService
-   * @param {ActivatedRoute} route
-   * @param nameService
-   */
+  itemName$: Observable<string>;
+
+  readonly AlertType = AlertType;
+
   constructor(
-    private linkService: LinkService,
-    private route: ActivatedRoute,
+    protected linkService: LinkService,
+    protected route: ActivatedRoute,
     public nameService: DSONameService
   ) {
   }
@@ -109,23 +107,14 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    * Initialize the component, setting up the bundle and bitstream within the item
    */
   ngOnInit(): void {
-   this.getBundlesPerItem();
+    this.getBundlesPerItem();
+    this.itemName$ = this.getItemName();
   }
 
   /**
-   * Return the item's UUID
+   * Return the item's name
    */
-  getItemUUID(): Observable<string> {
-    return this.item$.pipe(
-      map((item: Item) => item.id),
-      first((UUID: string) => isNotEmpty(UUID))
-    );
-  }
-
-  /**
- * Return the item's name
- */
-  getItemName(): Observable<string> {
+  private getItemName(): Observable<string> {
     return this.item$.pipe(
       map((item: Item) => this.nameService.getName(item))
     );
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
index b83b93d8f10..35d89d648fb 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
@@ -5,9 +5,9 @@
         </button>
     </div>
     <div class="modal-body">
-        <ng-container *ngFor="let item of items; trackBy: trackItem">
-            <div *ngVar="(isSelectedVirtualMetadataItem(item) | async) as selected"
-                 (click)="setSelectedVirtualMetadataItem(item, !selected)"
+        <ng-container *ngFor="let itemDTO of itemDTOs">
+            <div *ngVar="(itemDTO?.isSelectedVirtualMetadata$ | async) as selected"
+                 (click)="setSelectedVirtualMetadataItem(itemDTO?.item, !selected)"
                  class="item d-flex flex-row">
                 <div class="m-2">
                     <label>
@@ -15,9 +15,9 @@
                     </label>
                 </div>
                 <div class="flex-column">
-                    <ds-listable-object-component-loader [object]="item">
+                    <ds-listable-object-component-loader [object]="itemDTO?.item">
                     </ds-listable-object-component-loader>
-                    <div *ngFor="let metadata of virtualMetadata.get(item.uuid)">
+                    <div *ngFor="let metadata of virtualMetadata.get(itemDTO?.item?.uuid)">
                         <div class="font-weight-bold">
                             {{metadata.metadataField}}
                         </div>
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
index 9391df4755c..761dfa7fa2b 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { of as observableOf } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { VirtualMetadataComponent } from './virtual-metadata.component';
 import { Item } from '../../../core/shared/item.model';
@@ -62,6 +62,10 @@ describe('VirtualMetadataComponent', () => {
     comp.leftItem = item;
     comp.rightItem = relatedItem;
     comp.relationshipId = relationshipId;
+    comp.ngOnChanges({
+      leftItem: new SimpleChange(undefined, comp.leftItem, true),
+      rightItem: new SimpleChange(undefined, comp.rightItem, true),
+    });
 
     fixture.detectChanges();
   });
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts
index 6f8991dc732..0c2cc5f63e0 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts
@@ -1,9 +1,15 @@
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
 import {Observable} from 'rxjs';
 import {Item} from '../../../core/shared/item.model';
 import {MetadataValue} from '../../../core/shared/metadata.models';
 import {ObjectUpdatesService} from '../../../core/data/object-updates/object-updates.service';
 import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { hasValue } from '../../../shared/empty.util';
+
+interface ItemDTO {
+  item: Item;
+  isSelectedVirtualMetadata$: Observable<boolean>;
+}
 
 @Component({
   selector: 'ds-virtual-metadata',
@@ -14,7 +20,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
  * The component is shown when a relationship is marked to be deleted.
  * Each item has a checkbox to indicate whether its virtual metadata should be saved as real metadata.
  */
-export class VirtualMetadataComponent implements OnInit {
+export class VirtualMetadataComponent implements OnInit, OnChanges {
 
   /**
    * The current url of this page
@@ -53,11 +59,9 @@ export class VirtualMetadataComponent implements OnInit {
   showThumbnails: boolean;
 
   /**
-   * Get an array of the left and the right item of the relationship to be deleted.
+   * Array of the left and the right item of the relationship to be deleted.
    */
-  get items() {
-    return [this.leftItem, this.rightItem];
-  }
+  itemDTOs: [ItemDTO, ItemDTO] = [undefined, undefined];
 
   public virtualMetadata: Map<string, VirtualMetadata[]> = new Map<string, VirtualMetadata[]>();
 
@@ -106,17 +110,24 @@ export class VirtualMetadataComponent implements OnInit {
     return this.objectUpdatesService.isSelectedVirtualMetadata(this.url, this.relationshipId, item.uuid);
   }
 
-  /**
-   * Prevent unnecessary rerendering so fields don't lose focus
-   */
-  trackItem(index, item: Item) {
-    return item && item.uuid;
+  ngOnInit(): void {
+    this.virtualMetadata.set(this.leftItem.uuid, this.getVirtualMetadata(this.leftItem));
+    this.virtualMetadata.set(this.rightItem.uuid, this.getVirtualMetadata(this.rightItem));
   }
 
-  ngOnInit(): void {
-    this.items.forEach((item) => {
-      this.virtualMetadata.set(item.uuid, this.getVirtualMetadata(item));
-    });
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((hasValue(changes.leftItem) || hasValue(changes.rightItem)) && hasValue(this.leftItem) && hasValue(this.rightItem)) {
+      this.itemDTOs = [
+        {
+          item: this.leftItem,
+          isSelectedVirtualMetadata$: this.isSelectedVirtualMetadataItem(this.leftItem),
+        },
+        {
+          item: this.rightItem,
+          isSelectedVirtualMetadata$: this.isSelectedVirtualMetadataItem(this.rightItem),
+        },
+      ];
+    }
   }
 }
 
diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
index e57ce330089..6bbec3f47a1 100644
--- a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
+++ b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
@@ -1,18 +1,18 @@
 <div class="container mb-5">
   <h2>{{'person.orcid.registry.auth' | translate}}</h2>
-  <ng-container *ngIf="(isLinkedToOrcid() | async); then orcidLinked; else orcidNotLinked"></ng-container>
+  <ng-container *ngIf="(isOrcidLinked$ | async); then orcidLinked; else orcidNotLinked"></ng-container>
 </div>
 
 <ng-template #orcidLinked>
   <div data-test="orcidLinked">
     <div class="row">
-      <div *ngIf="(hasOrcidAuthorizations() | async)" class="col-sm-6 mb-3" data-test="hasOrcidAuthorizations">
+      <div *ngIf="(hasOrcidAuthorizations$ | async)" class="col-sm-6 mb-3" data-test="hasOrcidAuthorizations">
         <div class="card h-100">
           <div class="card-header">{{ 'person.page.orcid.granted-authorizations'| translate }}</div>
           <div class="card-body">
             <div class="container p-0">
               <ul>
-                <li *ngFor="let auth of (getOrcidAuthorizations() | async)" data-test="orcidAuthorization">
+                <li *ngFor="let auth of profileAuthorizationScopes$ | async" data-test="orcidAuthorization">
                   {{getAuthorizationDescription(auth) | translate}}
                 </li>
               </ul>
@@ -25,13 +25,13 @@ <h2>{{'person.orcid.registry.auth' | translate}}</h2>
           <div class="card-header">{{ 'person.page.orcid.missing-authorizations'| translate }}</div>
           <div class="card-body">
             <div class="container">
-              <ds-alert *ngIf="!(hasMissingOrcidAuthorizations() | async)" [type]="'alert-success'" data-test="noMissingOrcidAuthorizations">
+              <ds-alert *ngIf="!(hasMissingOrcidAuthorizations$ | async)" [type]="AlertType.Success" data-test="noMissingOrcidAuthorizations">
                 {{'person.page.orcid.no-missing-authorizations-message' | translate}}
               </ds-alert>
-              <ds-alert *ngIf="(hasMissingOrcidAuthorizations() | async)" [type]="'alert-warning'" data-test="missingOrcidAuthorizations">
+              <ds-alert *ngIf="(hasMissingOrcidAuthorizations$ | async)" [type]="AlertType.Warning" data-test="missingOrcidAuthorizations">
                 {{'person.page.orcid.missing-authorizations-message' | translate}}
                 <ul>
-                  <li *ngFor="let auth of (getMissingOrcidAuthorizations() | async)" data-test="missingOrcidAuthorization">
+                  <li *ngFor="let auth of profileAuthorizationScopes$ | async" data-test="missingOrcidAuthorization">
                     {{getAuthorizationDescription(auth) | translate }}
                   </li>
                 </ul>
@@ -41,11 +41,11 @@ <h2>{{'person.orcid.registry.auth' | translate}}</h2>
         </div>
       </div>
     </div>
-    <ds-alert *ngIf="(onlyAdminCanDisconnectProfileFromOrcid() | async) && !(ownerCanDisconnectProfileFromOrcid() | async)"
-              [type]="'alert-warning'" data-test="unlinkOnlyAdmin">
+    <ds-alert *ngIf="(onlyAdminCanDisconnectProfileFromOrcid$ | async) && !(ownerCanDisconnectProfileFromOrcid$ | async)"
+              [type]="AlertType.Warning" data-test="unlinkOnlyAdmin">
       {{ 'person.page.orcid.remove-orcid-message' | translate}}
     </ds-alert>
-    <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid() | async)" data-test="unlinkOwner">
+    <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid$ | async)" data-test="unlinkOwner">
       <div class="col">
         <button type="submit" class="btn btn-danger float-right" (click)="unlinkOrcid()"
                 [disabled]="(unlinkProcessing | async)">
@@ -54,7 +54,7 @@ <h2>{{'person.orcid.registry.auth' | translate}}</h2>
           <span *ngIf="(unlinkProcessing | async)"><i
             class='fas fa-circle-notch fa-spin'></i> {{'person.page.orcid.unlink.processing' | translate}}</span>
         </button>
-        <button *ngIf="(hasMissingOrcidAuthorizations() | async)" type="submit"
+        <button *ngIf="(hasMissingOrcidAuthorizations$ | async)" type="submit"
                 class="btn btn-primary float-right" (click)="linkOrcid()">
           <span><i class="fas fa-check"></i> {{ 'person.page.orcid.grant-authorizations' | translate }}</span>
         </button>
@@ -68,7 +68,7 @@ <h2>{{'person.orcid.registry.auth' | translate}}</h2>
     <div class="row">
       <div class="col-2"><img alt="orcid-logo" src="../../../../assets/images/orcid.logo.icon.svg"/></div>
       <div class="col">
-        <ds-alert [type]="'alert-info'">{{ getOrcidNotLinkedMessage() | async }}</ds-alert>
+        <ds-alert [type]="AlertType.Info">{{ getOrcidNotLinkedMessage() }}</ds-alert>
       </div>
     </div>
     <div class="row">
diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts
index ea970e7d315..4fd77f99518 100644
--- a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts
+++ b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts
@@ -10,6 +10,7 @@ import { RemoteData } from '../../../core/data/remote-data';
 import { ResearcherProfile } from '../../../core/profile/model/researcher-profile.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { OrcidAuthService } from '../../../core/orcid/orcid-auth.service';
+import { AlertType } from '../../../shared/alert/aletr-type';
 
 @Component({
   selector: 'ds-orcid-auth',
@@ -26,43 +27,49 @@ export class OrcidAuthComponent implements OnInit, OnChanges {
   /**
    * The list of exposed orcid authorization scopes for the orcid profile
    */
-  profileAuthorizationScopes: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+  profileAuthorizationScopes$: BehaviorSubject<string[]> = new BehaviorSubject([]);
+
+  hasOrcidAuthorizations$: Observable<boolean>;
 
   /**
    * The list of all orcid authorization scopes missing in the orcid profile
    */
-  missingAuthorizationScopes: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+  missingAuthorizationScopes: BehaviorSubject<string[]> = new BehaviorSubject([]);
+
+  hasMissingOrcidAuthorizations$: Observable<boolean>;
 
   /**
    * The list of all orcid authorization scopes available
    */
-  orcidAuthorizationScopes: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+  orcidAuthorizationScopes: BehaviorSubject<string[]> = new BehaviorSubject([]);
 
   /**
    * A boolean representing if unlink operation is processing
    */
-  unlinkProcessing: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  unlinkProcessing: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * A boolean representing if orcid profile is linked
    */
-  private isOrcidLinked$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  isOrcidLinked$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * A boolean representing if only admin can disconnect orcid profile
    */
-  private onlyAdminCanDisconnectProfileFromOrcid$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  onlyAdminCanDisconnectProfileFromOrcid$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * A boolean representing if owner can disconnect orcid profile
    */
-  private ownerCanDisconnectProfileFromOrcid$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  ownerCanDisconnectProfileFromOrcid$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * An event emitted when orcid profile is unliked successfully
    */
   @Output() unlink: EventEmitter<void> = new EventEmitter<void>();
 
+  readonly AlertType = AlertType;
+
   constructor(
     private orcidAuthService: OrcidAuthService,
     private translateService: TranslateService,
@@ -76,6 +83,8 @@ export class OrcidAuthComponent implements OnInit, OnChanges {
       this.orcidAuthorizationScopes.next(scopes);
       this.initOrcidAuthSettings();
     });
+    this.hasOrcidAuthorizations$ = this.hasOrcidAuthorizations();
+    this.hasMissingOrcidAuthorizations$ = this.hasMissingOrcidAuthorizations();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -88,18 +97,11 @@ export class OrcidAuthComponent implements OnInit, OnChanges {
    * Check if the list of exposed orcid authorization scopes for the orcid profile has values
    */
   hasOrcidAuthorizations(): Observable<boolean> {
-    return this.profileAuthorizationScopes.asObservable().pipe(
+    return this.profileAuthorizationScopes$.pipe(
       map((scopes: string[]) => scopes.length > 0)
     );
   }
 
-  /**
-   * Return the list of exposed orcid authorization scopes for the orcid profile
-   */
-  getOrcidAuthorizations(): Observable<string[]> {
-    return this.profileAuthorizationScopes.asObservable();
-  }
-
   /**
    * Check if the list of exposed orcid authorization scopes for the orcid profile has values
    */
@@ -109,26 +111,12 @@ export class OrcidAuthComponent implements OnInit, OnChanges {
     );
   }
 
-  /**
-   * Return the list of exposed orcid authorization scopes for the orcid profile
-   */
-  getMissingOrcidAuthorizations(): Observable<string[]> {
-    return this.profileAuthorizationScopes.asObservable();
-  }
-
-  /**
-   * Return a boolean representing if orcid profile is linked
-   */
-  isLinkedToOrcid(): Observable<boolean> {
-    return this.isOrcidLinked$.asObservable();
-  }
-
-  getOrcidNotLinkedMessage(): Observable<string> {
+  getOrcidNotLinkedMessage(): string {
     const orcid = this.item.firstMetadataValue('person.identifier.orcid');
     if (orcid) {
-      return this.translateService.get('person.page.orcid.orcid-not-linked-message', { 'orcid': orcid });
+      return this.translateService.instant('person.page.orcid.orcid-not-linked-message', { 'orcid': orcid });
     } else {
-      return this.translateService.get('person.page.orcid.no-orcid-message');
+      return this.translateService.instant('person.page.orcid.no-orcid-message');
     }
   }
 
@@ -141,13 +129,6 @@ export class OrcidAuthComponent implements OnInit, OnChanges {
     return 'person.page.orcid.scope.' + scope.substring(1).replace('/', '-');
   }
 
-  /**
-   * Return a boolean representing if only admin can disconnect orcid profile
-   */
-  onlyAdminCanDisconnectProfileFromOrcid(): Observable<boolean> {
-    return this.onlyAdminCanDisconnectProfileFromOrcid$.asObservable();
-  }
-
   /**
    * Return a boolean representing if owner can disconnect orcid profile
    */
@@ -212,7 +193,7 @@ export class OrcidAuthComponent implements OnInit, OnChanges {
   }
 
   private setOrcidAuthorizationsFromItem(): void {
-    this.profileAuthorizationScopes.next(this.orcidAuthService.getOrcidAuthorizationScopesByItem(this.item));
+    this.profileAuthorizationScopes$.next(this.orcidAuthService.getOrcidAuthorizationScopesByItem(this.item));
   }
 
 }
diff --git a/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.html b/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.html
index 6ba318f7fd5..9b3e470fc1d 100644
--- a/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.html
+++ b/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.html
@@ -3,13 +3,13 @@
   <div class="container">
     <h2>{{ 'person.orcid.registry.queue' | translate }}</h2>
 
-    <ds-alert *ngIf="!(processing$ | async) && (getList() | async)?.payload?.totalElements == 0"
+    <ds-alert *ngIf="!(processing$ | async) && (list$ | async)?.payload?.totalElements == 0"
               [type]="AlertTypeEnum.Info">
       {{ 'person.page.orcid.sync-queue.empty-message' | translate}}
     </ds-alert>
-    <ds-pagination *ngIf="!(processing$ | async) && (getList() | async)?.payload?.totalElements > 0"
+    <ds-pagination *ngIf="!(processing$ | async) && (list$ | async)?.payload?.totalElements > 0"
                    [paginationOptions]="paginationOptions"
-                   [collectionSize]="(getList() | async)?.payload?.totalElements"
+                   [collectionSize]="(list$ | async)?.payload?.totalElements"
                    [retainScrollPosition]="false" [hideGear]="true" (paginationChange)="updateList()">
 
       <div class="table-responsive">
@@ -22,7 +22,7 @@ <h2>{{ 'person.orcid.registry.queue' | translate }}</h2>
           </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let entry of (getList() | async)?.payload?.page" data-test="orcidQueueElementRow">
+          <tr *ngFor="let entry of (list$ | async)?.payload?.page" data-test="orcidQueueElementRow">
             <td style="width: 15%" class="text-center align-middle">
               <i [ngClass]="getIconClass(entry)" [ngbTooltip]="getIconTooltip(entry) | translate"
                  class="fa-2x" aria-hidden="true"></i>
diff --git a/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts b/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
index 6079287f711..098bac3fade 100644
--- a/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
+++ b/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
@@ -47,13 +47,12 @@ export class OrcidQueueComponent implements OnInit, OnDestroy {
   /**
    * A list of orcid queue records
    */
-  private list$: BehaviorSubject<RemoteData<PaginatedList<OrcidQueue>>> = new BehaviorSubject<RemoteData<PaginatedList<OrcidQueue>>>({} as any);
+  list$: BehaviorSubject<RemoteData<PaginatedList<OrcidQueue>>> = new BehaviorSubject<RemoteData<PaginatedList<OrcidQueue>>>({} as any);
 
   /**
    * The AlertType enumeration
-   * @type {AlertType}
    */
-  AlertTypeEnum = AlertType;
+  readonly AlertTypeEnum = AlertType;
 
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
@@ -99,13 +98,6 @@ export class OrcidQueueComponent implements OnInit, OnDestroy {
     );
   }
 
-  /**
-   * Return the list of orcid queue records
-   */
-  getList(): Observable<RemoteData<PaginatedList<OrcidQueue>>> {
-    return this.list$.asObservable();
-  }
-
   /**
    * Return the icon class for the queue object type
    *
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index bc1e04f5130..9b043a5865c 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="(isXsOrSm$ | async) !== true ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
     <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
     <div class="navbar-inner-container w-100" [class.container]="!(isXsOrSm$ | async)">
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index 5bf5fee79f2..288d6eb3cac 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -70,16 +70,16 @@ <h4>{{'process.overview.delete.header' | translate }}</h4>
         </div>
 
         <div class="modal-body">
-            <div *ngIf="!(processBulkDeleteService.isProcessing$() |async)">{{'process.overview.delete.body' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</div>
-            <div *ngIf="processBulkDeleteService.isProcessing$() |async" class="alert alert-info">
+            <div *ngIf="(isProcessing$ | async) !== true">{{'process.overview.delete.body' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</div>
+            <div *ngIf="(isProcessing$ | async) === true" class="alert alert-info">
                 <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
                 <span> {{ 'process.overview.delete.processing' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</span>
             </div>
             <div class="mt-4">
-                <button class="btn btn-primary mr-2" [disabled]="processBulkDeleteService.isProcessing$() |async"
+                <button class="btn btn-primary mr-2" [disabled]="(isProcessing$ | async) === true"
                         (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
                 <button id="delete-confirm" class="btn btn-danger"
-                        [disabled]="processBulkDeleteService.isProcessing$() |async"
+                        [disabled]="(isProcessing$ | async) === true"
                         (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()}  }}
                 </button>
             </div>
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
index 7fa3b12dacc..7d119620508 100644
--- a/src/app/process-page/overview/process-overview.component.ts
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -50,11 +50,12 @@ export class ProcessOverviewComponent implements OnInit, OnDestroy {
    */
   dateFormat = 'yyyy-MM-dd HH:mm:ss';
 
-  processesToDelete: string[] = [];
   private modalRef: any;
 
   isProcessingSub: Subscription;
 
+  isProcessing$: Observable<boolean>;
+
   constructor(protected processService: ProcessDataService,
               protected paginationService: PaginationService,
               protected ePersonService: EPersonDataService,
@@ -67,6 +68,7 @@ export class ProcessOverviewComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.setProcesses();
     this.processBulkDeleteService.clearAllProcesses();
+    this.isProcessing$ = this.processBulkDeleteService.isProcessing$();
   }
 
   /**
diff --git a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
index 2d959c1dfea..9e52b27af18 100644
--- a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
+++ b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
@@ -13,12 +13,12 @@
     <p>{{'researcher.profile.not.associated' | translate}}</p>
   </div>
   <button *ngIf="!researcherProfile" class="btn btn-primary mr-2"
-          [disabled]="(isProcessingCreate() | async)"
+          [disabled]="(processingDelete$ | async) === true"
           (click)="createProfile()">
-    <span *ngIf="(isProcessingCreate() | async)">
+    <span *ngIf="(processingDelete$ | async) === true">
         <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
     </span>
-    <span *ngIf="!(isProcessingCreate() | async)">
+    <span *ngIf="(processingCreate$ | async) !== true">
         <i class="fas fa-plus"></i> &nbsp;{{'researcher.profile.create.new' | translate}}
     </span>
   </button>
@@ -27,10 +27,10 @@
       <i class="fas fa-info-circle"></i> {{'researcher.profile.view' | translate}}
     </button>
     <button class="btn btn-danger" [disabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
-        <span *ngIf="(isProcessingDelete() | async)">
+        <span *ngIf="(processingDelete$ | async) === true">
             <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
         </span>
-        <span *ngIf="!(isProcessingDelete() | async)">
+        <span *ngIf="(processingDelete$ | async) !== true">
             <i class="fas fa-trash-alt"></i> &nbsp;{{'researcher.profile.delete' | translate}}
         </span>
     </button>
diff --git a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts
index d63360fbf4b..7797815d4f0 100644
--- a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts
+++ b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { map, mergeMap, switchMap, take, tap } from 'rxjs/operators';
 
 import { getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
@@ -157,24 +157,6 @@ export class ProfilePageResearcherFormComponent implements OnInit {
     });
   }
 
-  /**
-   * Return a boolean representing if a delete operation is pending.
-   *
-   * @return {Observable<boolean>}
-   */
-  isProcessingDelete(): Observable<boolean> {
-    return this.processingDelete$.asObservable();
-  }
-
-  /**
-   * Return a boolean representing if a create operation is pending.
-   *
-   * @return {Observable<boolean>}
-   */
-  isProcessingCreate(): Observable<boolean> {
-    return this.processingCreate$.asObservable();
-  }
-
   /**
    * Create a new profile related to the current user from scratch.
    */
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index 44783da84e8..329f5b2844d 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(user$ | async) as user">
   <div class="container" *ngIf="user">
-    <ng-container *ngIf="isResearcherProfileEnabled() | async">
+    <ng-container *ngIf="isResearcherProfileEnabled$ | async">
       <h3 class="mb-4">{{'profile.head' | translate}}</h3>
       <div class="card mb-4">
         <div class="card-header">{{'profile.card.researcher' | translate}}</div>
diff --git a/src/app/profile-page/profile-page.component.spec.ts b/src/app/profile-page/profile-page.component.spec.ts
index 709ed56790a..db7ffc0d62c 100644
--- a/src/app/profile-page/profile-page.component.spec.ts
+++ b/src/app/profile-page/profile-page.component.spec.ts
@@ -309,55 +309,4 @@ describe('ProfilePageComponent', () => {
     });
   });
   });
-
-  describe('isResearcherProfileEnabled', () => {
-
-    describe('when configuration service return values', () => {
-
-      beforeEach(() => {
-        configurationService.findByPropertyName.and.returnValue(createSuccessfulRemoteDataObject$(validConfiguration));
-        fixture.detectChanges();
-      });
-
-      it('should return true', () => {
-        const result = component.isResearcherProfileEnabled();
-        const expected = cold('a', {
-          a: true
-        });
-        expect(result).toBeObservable(expected);
-      });
-    });
-
-    describe('when configuration service return no values', () => {
-
-      beforeEach(() => {
-        configurationService.findByPropertyName.and.returnValue(createSuccessfulRemoteDataObject$(emptyConfiguration));
-        fixture.detectChanges();
-      });
-
-      it('should return false', () => {
-        const result = component.isResearcherProfileEnabled();
-        const expected = cold('a', {
-          a: false
-        });
-        expect(result).toBeObservable(expected);
-      });
-    });
-
-    describe('when configuration service return an error', () => {
-
-      beforeEach(() => {
-        configurationService.findByPropertyName.and.returnValue(createFailedRemoteDataObject$());
-        fixture.detectChanges();
-      });
-
-      it('should return false', () => {
-        const result = component.isResearcherProfileEnabled();
-        const expected = cold('a', {
-          a: false
-        });
-        expect(result).toBeObservable(expected);
-      });
-    });
-  });
 });
diff --git a/src/app/profile-page/profile-page.component.ts b/src/app/profile-page/profile-page.component.ts
index 343314999ba..b537578dc79 100644
--- a/src/app/profile-page/profile-page.component.ts
+++ b/src/app/profile-page/profile-page.component.ts
@@ -192,11 +192,4 @@ export class ProfilePageComponent implements OnInit {
     this.updateProfile();
   }
 
-  /**
-   * Returns true if the researcher profile feature is enabled, false otherwise.
-   */
-  isResearcherProfileEnabled(): Observable<boolean> {
-    return this.isResearcherProfileEnabled$.asObservable();
-  }
-
 }
diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
index 6d13d921e07..2723eb86c02 100644
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -100,10 +100,10 @@ export class HostWindowService {
   }
 
   isXsOrSm(): Observable<boolean> {
-    return observableCombineLatest(
+    return observableCombineLatest([
       this.isXs(),
       this.isSm()
-    ).pipe(
+    ]).pipe(
       map(([isXs, isSm]) => isXs || isSm),
       distinctUntilChanged()
     );
diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index d1a820b1daf..ddd7f1fa99d 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -21,7 +21,7 @@ <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
   </div>
   <ng-content></ng-content>
 
-  <div *ngIf="shouldShowBottomPager | async">
+  <div *ngIf="showBottomPager$ | async">
     <div *ngIf="showPaginator" class="pagination justify-content-center clearfix bottom">
       <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
                       [collectionSize]="collectionSize"
diff --git a/src/app/shared/pagination/pagination.component.ts b/src/app/shared/pagination/pagination.component.ts
index 0e393455952..8e4f2735afd 100644
--- a/src/app/shared/pagination/pagination.component.ts
+++ b/src/app/shared/pagination/pagination.component.ts
@@ -190,6 +190,11 @@ export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
 
   public showingDetails$: Observable<PaginationDetails>;
 
+  /**
+   * Whether the current pagination should show a bottom pages
+   */
+  showBottomPager$: Observable<boolean>;
+
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
@@ -219,7 +224,7 @@ export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.collectionSize.currentValue !== changes.collectionSize.previousValue) {
+    if (changes.collectionSize?.currentValue !== changes.collectionSize?.previousValue) {
       this.showingDetails$ = this.getShowingDetails(this.collectionSize);
     }
   }
@@ -259,6 +264,7 @@ export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
       this.sortField$ = this.paginationService.getCurrentSort(this.id, sortOptions).pipe(
         map((currentSort) => currentSort.field)
       );
+    this.showBottomPager$ = this.shouldShowBottomPager;
   }
 
   constructor(
diff --git a/src/app/submission/form/section-add/submission-form-section-add.component.html b/src/app/submission/form/section-add/submission-form-section-add.component.html
index 939f23209ac..8e483c8a661 100644
--- a/src/app/submission/form/section-add/submission-form-section-add.component.html
+++ b/src/app/submission/form/section-add/submission-form-section-add.component.html
@@ -2,18 +2,18 @@
      #sectionAdd="ngbDropdown"
      placement="bottom-right"
      class="d-inline-block"
-     [ngClass]="{'w-100': windowService.isXs()}">
+     [ngClass]="{'w-100': isXs$}">
   <button class="btn btn-outline-primary dropdown-toggle"
           id="sectionControls"
           [disabled]="!(hasSections$ | async)"
-          [ngClass]="{'w-100': (windowService.isXs() | async)}"
+          [ngClass]="{'w-100': (isXs$ | async)}"
           ngbDropdownToggle>
           {{ 'submission.sections.general.add-more' | translate }} <i class="fa fa-plus" aria-hidden="true"></i>
   </button>
   <div ngbDropdownMenu
        class="sections-dropdown-menu"
        aria-labelledby="sectionControls"
-       [ngClass]="{'w-100': (windowService.isXs() | async)}">
+       [ngClass]="{'w-100': (isXs$ | async)}">
     <button class="dropdown-item disabled" *ngIf="!(hasSections$ | async)">
       {{ 'submission.sections.general.no-sections' | translate }}
     </button>
diff --git a/src/app/submission/form/section-add/submission-form-section-add.component.ts b/src/app/submission/form/section-add/submission-form-section-add.component.ts
index 1a758961d6c..f4b399948bd 100644
--- a/src/app/submission/form/section-add/submission-form-section-add.component.ts
+++ b/src/app/submission/form/section-add/submission-form-section-add.component.ts
@@ -42,6 +42,11 @@ export class SubmissionFormSectionAddComponent implements OnInit {
    */
   public hasSections$: Observable<boolean>;
 
+  /**
+   * A boolean representing whether it's a small screen
+   */
+  isXs$: Observable<boolean>;
+
   /**
    * Initialize instance variables
    *
@@ -62,6 +67,7 @@ export class SubmissionFormSectionAddComponent implements OnInit {
     this.hasSections$ = this.sectionList$.pipe(
       map((list: SectionDataObject[]) => list.length > 0)
     );
+    this.isXs$ = this.windowService.isXs();
   }
 
   /**
diff --git a/src/app/submission/form/submission-form.component.html b/src/app/submission/form/submission-form.component.html
index 4a916cfe238..26bafd031b9 100644
--- a/src/app/submission/form/submission-form.component.html
+++ b/src/app/submission/form/submission-form.component.html
@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
+    <div *ngIf="(isLoading$ | async) !== true" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
         <div *ngIf="(uploadEnabled$ | async)" class="w-100">
             <ds-submission-upload-files [submissionId]="submissionId"
                                         [collectionId]="collectionId"
@@ -26,14 +26,14 @@
     </div>
 
     <div class="submission-form-content">
-        <ds-themed-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-themed-loading>
+        <ds-themed-loading *ngIf="(isLoading$ | async) === true" message="Loading..."></ds-themed-loading>
         <ng-container *ngFor="let object of (submissionSections | async)">
             <ds-submission-section-container [collectionId]="collectionId"
                                              [submissionId]="submissionId"
                                              [sectionData]="object"></ds-submission-section-container>
         </ng-container>
     </div>
-    <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
+    <div *ngIf="(isLoading$ | async) !== true" class="submission-form-footer mt-3 mb-3 position-sticky">
         <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
     </div>
 </div>
diff --git a/src/app/submission/form/submission-form.component.spec.ts b/src/app/submission/form/submission-form.component.spec.ts
index cc77c44afb9..73c837b82d0 100644
--- a/src/app/submission/form/submission-form.component.spec.ts
+++ b/src/app/submission/form/submission-form.component.spec.ts
@@ -117,7 +117,7 @@ describe('SubmissionFormComponent Component', () => {
       expect(compAsAny.submissionSections).toBeUndefined();
       expect(compAsAny.subs).toEqual([]);
       expect(submissionServiceStub.startAutoSave).not.toHaveBeenCalled();
-      expect(comp.loading).toBeObservable(cold('(a|)', { a: true }));
+      expect(comp.isLoading$).toBeObservable(cold('(a|)', { a: true }));
       done();
     });
 
diff --git a/src/app/submission/form/submission-form.component.ts b/src/app/submission/form/submission-form.component.ts
index 216aefcfc3b..3a513514617 100644
--- a/src/app/submission/form/submission-form.component.ts
+++ b/src/app/submission/form/submission-form.component.ts
@@ -88,7 +88,7 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
    * A boolean representing if a submission form is pending
    * @type {Observable<boolean>}
    */
-  public loading: Observable<boolean> = observableOf(true);
+  public isLoading$: Observable<boolean> = observableOf(true);
 
   /**
    * Emits true when the submission config has bitstream uploading enabled in submission
@@ -160,7 +160,7 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
       this.uploadEnabled$ = this.sectionsService.isSectionTypeAvailable(this.submissionId, SectionsType.Upload);
 
       // check if is submission loading
-      this.loading = this.submissionService.getSubmissionObject(this.submissionId).pipe(
+      this.isLoading$ = this.submissionService.getSubmissionObject(this.submissionId).pipe(
         filter(() => this.isActive),
         map((submission: SubmissionObjectEntry) => submission.isLoading),
         map((isLoading: boolean) => isLoading),
@@ -266,13 +266,6 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
     }
   }
 
-  /**
-   * Check if submission form is loading
-   */
-  isLoading(): Observable<boolean> {
-    return this.loading;
-  }
-
   /**
    * Check if submission form is loading
    */
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index 0796da5a64a..e351b609d24 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -118,27 +118,25 @@ <h5>
 
 </ng-container>
 
-<ng-container *ngIf="getCcLicenseLink$()">
-  <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
-    <div *ngIf="!licenseLink">
-      <ds-themed-loading></ds-themed-loading>
+<ng-container *ngIf="ccLicenseLink$ | async as licenseLink">
+  <div *ngIf="!licenseLink">
+    <ds-themed-loading></ds-themed-loading>
+  </div>
+  <div *ngIf="licenseLink"
+       class="mt-2 p-4 bg-light text-dark">
+    <div>
+      {{ 'submission.sections.ccLicense.link' | translate }}
     </div>
-    <div *ngIf="licenseLink"
-         class="mt-2 p-4 bg-light text-dark">
-      <div>
-        {{ 'submission.sections.ccLicense.link' | translate }}
-      </div>
-      <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
-        {{ licenseLink }}
-      </a>
-      <div class="m-2">
-        <div (click)="setAccepted(!accepted)">
-          <input type="checkbox"
-                 title="accepted"
-                 [checked]="accepted">
-          <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
-        </div>
+    <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
+      {{ licenseLink }}
+    </a>
+    <div class="m-2">
+      <div (click)="setAccepted(!accepted)">
+        <input type="checkbox"
+               title="accepted"
+               [checked]="accepted">
+        <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
       </div>
     </div>
-  </ng-container>
+  </div>
 </ng-container>
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index c8cd898f966..c1edf2e9584 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnChanges, SimpleChanges } from '@angular/core';
 import { Observable, of as observableOf, Subscription } from 'rxjs';
 import { Field, Option, SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
 import {
@@ -16,7 +16,7 @@ import { SectionDataObject } from '../models/section-data.model';
 import { SectionsService } from '../sections.service';
 import { WorkspaceitemSectionCcLicenseObject } from '../../../core/submission/models/workspaceitem-section-cc-license.model';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
-import { isNotEmpty } from '../../../shared/empty.util';
+import { isNotEmpty, hasValue } from '../../../shared/empty.util';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
 import { SubmissionCcLicenseUrlDataService } from '../../../core/submission/submission-cc-license-url-data.service';
 import {ConfigurationDataService} from '../../../core/data/configuration-data.service';
@@ -30,7 +30,7 @@ import {ConfigurationDataService} from '../../../core/data/configuration-data.se
   styleUrls: ['./submission-section-cc-licenses.component.scss']
 })
 @renderSectionFor(SectionsType.CcLicense)
-export class SubmissionSectionCcLicensesComponent extends SectionModelComponent {
+export class SubmissionSectionCcLicensesComponent extends SectionModelComponent implements OnChanges {
 
   /**
    * The form id
@@ -87,6 +87,8 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     return this.data.accepted;
   }
 
+  ccLicenseLink$: Observable<string>;
+
   constructor(
     protected modalService: NgbModal,
     protected sectionService: SectionsService,
@@ -105,6 +107,12 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     );
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (hasValue(changes.sectionData) || hasValue(changes.submissionCcLicenses)) {
+      this.ccLicenseLink$ = this.getCcLicenseLink$();
+    }
+  }
+
   /**
    * The data of this section.
    */
diff --git a/src/app/submission/sections/identifiers/section-identifiers.component.html b/src/app/submission/sections/identifiers/section-identifiers.component.html
index dd0b5d2930a..caf249e5b6e 100644
--- a/src/app/submission/sections/identifiers/section-identifiers.component.html
+++ b/src/app/submission/sections/identifiers/section-identifiers.component.html
@@ -3,18 +3,17 @@
 @author Kim Shepherd
 -->
 <!-- Main identifier data -->
-<ng-container *ngVar="(getIdentifierData() | async) as identifierData">
-  <ng-container *ngIf="identifierData && identifierData.identifiers">
-  <div>
-  <span>{{'submission.sections.identifiers.info' | translate}}</span>
-  <ul>
-    <ng-container *ngFor="let identifier of identifierData.identifiers">
-      <ng-container *ngIf="identifierData.displayTypes.includes(identifier.identifierType) && identifier.value">
-        <li>{{'submission.sections.identifiers.' + identifier.identifierType + '_label' | translate}}
-          {{identifier.value}}</li>
+<ng-container *ngIf="(identifierData$ | async) as identifierData">
+  <div *ngIf="identifierData.identifiers">
+    <span>{{ 'submission.sections.identifiers.info' | translate }}</span>
+    <ul>
+      <ng-container *ngFor="let identifier of identifierData.identifiers">
+        <ng-container *ngIf="identifierData.displayTypes.includes(identifier.identifierType) && identifier.value">
+          <li>{{ 'submission.sections.identifiers.' + identifier.identifierType + '_label' | translate }}
+            {{ identifier.value }}
+          </li>
+        </ng-container>
       </ng-container>
-    </ng-container>
-  </ul>
- </div>
- </ng-container>
+    </ul>
+  </div>
 </ng-container>
diff --git a/src/app/submission/sections/identifiers/section-identifiers.component.ts b/src/app/submission/sections/identifiers/section-identifiers.component.ts
index 2dc70f668e5..85bdb003ab9 100644
--- a/src/app/submission/sections/identifiers/section-identifiers.component.ts
+++ b/src/app/submission/sections/identifiers/section-identifiers.component.ts
@@ -42,14 +42,13 @@ export class SubmissionSectionIdentifiersComponent extends SectionModelComponent
    * Observable identifierData subject
    * @type {Observable<WorkspaceitemSectionIdentifiersObject>}
    */
-  public identifierData$: Observable<WorkspaceitemSectionIdentifiersObject> = new Observable<WorkspaceitemSectionIdentifiersObject>();
+  public identifierData$: Observable<WorkspaceitemSectionIdentifiersObject>;
 
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
    */
   protected subs: Subscription[] = [];
-  public subbedIdentifierData: WorkspaceitemSectionIdentifiersObject;
 
   /**
    * Initialize instance variables.
@@ -83,13 +82,6 @@ export class SubmissionSectionIdentifiersComponent extends SectionModelComponent
     this.identifierData$ = this.getIdentifierData();
   }
 
-  /**
-   * Check if identifier section has read-only visibility
-   */
-  isReadOnly(): boolean {
-    return true;
-  }
-
   /**
    * Unsubscribe from all subscriptions, if needed.
    */
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 05afac7d7e9..55e31e70c39 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(isXsOrSm$ | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
   class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
   <div class="navbar-inner-container w-100 h-100" [class.container]="!(isXsOrSm$ | async)">
     <a class="navbar-brand my-2" routerLink="/home">