117287: Fixed UI freezing on withdrawn item pages

Author: alexandrevryghem

src/app/item-page/alerts/item-alerts.component.html

@@ -8,7 +8,7 @@
                 <span class="align-self-center">{{'item.alerts.withdrawn' | translate}}</span>
                 <div class="gap-2 d-flex">
                   <a routerLink="/home" class="btn btn-primary btn-sm">{{"404.link.home-page" | translate}}</a>
-                  <a *ngIf="showReinstateButton$() | async" class="btn btn-primary btn-sm" (click)="openReinstateModal()">{{ 'item.alerts.reinstate-request' | translate}}</a>
+                  <a *ngIf="showReinstateButton$ | async" class="btn btn-primary btn-sm" (click)="openReinstateModal()">{{ 'item.alerts.reinstate-request' | translate}}</a>
                 </div>
             </div>
         </ds-alert>

src/app/item-page/alerts/item-alerts.component.spec.ts

@@ -161,7 +161,7 @@ describe('ItemAlertsComponent', () => {
         (authorizationService.isAuthorized).and.returnValue(isAdmin$);
         (correctionTypeDataService.findByItem).and.returnValue(correction$);
 
-        expectObservable(component.showReinstateButton$()).toBe(expectedMarble, expectedValues);
+        expectObservable(component.shouldShowReinstateButton()).toBe(expectedMarble, expectedValues);
       });
     });
 

src/app/item-page/alerts/item-alerts.component.ts

@@ -5,6 +5,8 @@ import {
 import {
   Component,
   Input,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -45,31 +47,42 @@ import {
 /**
  * Component displaying alerts for an item
  */
-export class ItemAlertsComponent {
+export class ItemAlertsComponent implements OnChanges {
   /**
    * The Item to display alerts for
    */
   @Input() item: Item;
 
+  /**
+   * Whether the reinstate button should be shown
+   */
+  showReinstateButton$: Observable<boolean>;
+
   /**
    * The AlertType enumeration
    * @type {AlertType}
    */
   public AlertTypeEnum = AlertType;
 
   constructor(
-    private authService: AuthorizationDataService,
-    private dsoWithdrawnReinstateModalService: DsoWithdrawnReinstateModalService,
-    private correctionTypeDataService: CorrectionTypeDataService,
+    protected authService: AuthorizationDataService,
+    protected dsoWithdrawnReinstateModalService: DsoWithdrawnReinstateModalService,
+    protected correctionTypeDataService: CorrectionTypeDataService,
   ) {
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.item?.currentValue.withdrawn && this.showReinstateButton$) {
+      this.showReinstateButton$ = this.shouldShowReinstateButton();
+    }
+  }
+
   /**
    * Determines whether to show the reinstate button.
    * The button is shown if the user is not an admin and the item has a reinstate request.
    * @returns An Observable that emits a boolean value indicating whether to show the reinstate button.
    */
-  showReinstateButton$(): Observable<boolean>  {
+  shouldShowReinstateButton(): Observable<boolean>  {
     const correction$ = this.correctionTypeDataService.findByItem(this.item.uuid, true).pipe(
       getFirstCompletedRemoteData(),
       map((correctionTypeRD: RemoteData<PaginatedList<CorrectionType>>) => correctionTypeRD.hasSucceeded ? correctionTypeRD.payload.page : []),
@@ -78,8 +91,8 @@ export class ItemAlertsComponent {
     return combineLatest([isAdmin$, correction$]).pipe(
       map(([isAdmin, correction]) => {
         return !isAdmin && correction.some((correctionType) => correctionType.topic === REQUEST_REINSTATE);
-      },
-      ));
+      }),
+    );
   }
 
   /**