From c54fcb8bd42961d0eb13e4380f5fa1bcd270443d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 29 Oct 2024 17:36:33 +0100
Subject: [PATCH] 117287: Fixed UI freezing on withdrawn item pages

---
 .../alerts/item-alerts.component.html         |  2 +-
 .../item-page/alerts/item-alerts.component.ts | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/item-page/alerts/item-alerts.component.html b/src/app/item-page/alerts/item-alerts.component.html
index f6304340f3d..b964327e39b 100644
--- a/src/app/item-page/alerts/item-alerts.component.html
+++ b/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>
diff --git a/src/app/item-page/alerts/item-alerts.component.ts b/src/app/item-page/alerts/item-alerts.component.ts
index 1984de0324a..6066ddae069 100644
--- a/src/app/item-page/alerts/item-alerts.component.ts
+++ b/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,12 +47,17 @@ 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}
@@ -64,12 +71,18 @@ export class ItemAlertsComponent {
   ) {
   }
 
+  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);
-      },
-      ));
+      }),
+    );
   }
 
   /**