From 72b7b8df41217dae0740249ea93256f173ae457b Mon Sep 17 00:00:00 2001
From: vlo-rte <valerie.longa@rte-france.com>
Date: Wed, 26 Feb 2025 14:12:50 +0100
Subject: [PATCH] Add loading spinner in custom card list screen (#7904)

Signed-off-by: vlo-rte <valerie.longa@rte-france.com>
---
 .../customCardList/CustomCardListComponent.html  | 16 ++++++++++++++--
 .../customCardList/CustomCardListComponent.scss  |  3 ++-
 .../customCardList/CustomCardListComponent.ts    | 15 +++++++++++++--
 .../monitoring/monitoring.component.scss         | 12 +-----------
 ui/main/src/scss/styles.scss                     | 10 ++++++++++
 5 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/ui/main/src/app/components/customCardList/CustomCardListComponent.html b/ui/main/src/app/components/customCardList/CustomCardListComponent.html
index fe9d81327b..9cad5924a9 100644
--- a/ui/main/src/app/components/customCardList/CustomCardListComponent.html
+++ b/ui/main/src/app/components/customCardList/CustomCardListComponent.html
@@ -75,7 +75,7 @@ <h1>Custom Screen {{id}} does not exist</h1>
         <div *ngIf="responseFromMyEntitiesFilterVisible">
             <label
                 id="opfab-show-cards-with-response"
-                style="font-weight: bold; margin-left: 5px; margin-right: 30px; margin-bottom: 0px"
+                style="font-weight: bold; margin-left: 5px; margin-right: 30px; margin-bottom: 0px; margin-top: 10px"
                 class="opfab-checkbox"
                 translate
                 >feed.filters.showCardsWithResponse.label
@@ -86,7 +86,7 @@ <h1>Custom Screen {{id}} does not exist</h1>
         <div *ngIf="responseFromAllEntitiesFilterVisible">
             <label
                 id="opfab-show-cards-with-all-response"
-                style="font-weight: bold; margin-left: 5px; margin-bottom: 0px"
+                style="font-weight: bold; margin-left: 5px; margin-bottom: 0px; margin-top: 10px"
                 class="opfab-checkbox"
                 translate
                 >shared.filters.showCardsWithResponseFromAllEntities
@@ -94,6 +94,18 @@ <h1>Custom Screen {{id}} does not exist</h1>
                 <span class="opfab-checkbox-checkmark"></span>
             </label>
         </div>
+        <div *ngIf="loadingInProgress" class="opfab-loading-spinner" style="margin-left: auto">
+            <ng-template #tipLoadingInProgress>
+                <span translate>feed.tips.loadingInProgress</span>
+            </ng-template>
+            <div
+                [ngbPopover]="tipLoadingInProgress"
+                popoverClass="opfab-popover-unclickable"
+                container="body"
+                triggers="mouseenter:mouseleave">
+                <em class="fas fa-spinner fa-spin opfab-slow-spinner"></em>
+            </div>
+        </div>
     </div>
 
     <div
diff --git a/ui/main/src/app/components/customCardList/CustomCardListComponent.scss b/ui/main/src/app/components/customCardList/CustomCardListComponent.scss
index 8ffb9c2613..7e292ccbc5 100644
--- a/ui/main/src/app/components/customCardList/CustomCardListComponent.scss
+++ b/ui/main/src/app/components/customCardList/CustomCardListComponent.scss
@@ -31,11 +31,12 @@
     display: flex;
     margin-left: 5%;
     margin-top: 20px;
-    margin-bottom: 10px;
     font-size: 30px;
     text-align: center;
     background-color: var(--opfab-bgcolor);
     color: var(--opfab-text-color);
+    height: 40px;
+    margin-bottom: 5px;
 }
 
 .opfab-custom-screen-response-btn {
diff --git a/ui/main/src/app/components/customCardList/CustomCardListComponent.ts b/ui/main/src/app/components/customCardList/CustomCardListComponent.ts
index 6e3cdb2c47..78a52c2141 100644
--- a/ui/main/src/app/components/customCardList/CustomCardListComponent.ts
+++ b/ui/main/src/app/components/customCardList/CustomCardListComponent.ts
@@ -10,7 +10,7 @@
 import {AsyncPipe, NgFor, NgIf} from '@angular/common';
 import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgbModal, NgbModalOptions, NgbModalRef, NgbPagination} from '@ng-bootstrap/ng-bootstrap';
+import {NgbModal, NgbModalOptions, NgbModalRef, NgbPagination, NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule} from '@ngx-translate/core';
 import {SelectedCardService} from '@ofServices/selectedCard/SelectedCardService';
 import {TranslationService} from '@ofServices/translation/TranslationService';
@@ -30,6 +30,8 @@ import {TypeOfStateEnum} from '@ofServices/processes/model/Processes';
 import {HasResponseCellRendererComponent} from './cellRenderers/HasResponseCellRendererComponent';
 import {InputCellRendererComponent} from './cellRenderers/InputCellRendererComponent';
 import {AgGrid} from 'app/utils/AgGrid';
+import {OpfabEventStreamService} from '@ofServices/events/OpfabEventStreamService';
+import {debounceTime} from 'rxjs/operators';
 
 @Component({
     selector: 'of-custom-card-list-screen',
@@ -47,7 +49,8 @@ import {AgGrid} from 'app/utils/AgGrid';
         ReactiveFormsModule,
         NgbPagination,
         CardComponent,
-        MultiSelectComponent
+        MultiSelectComponent,
+        NgbPopover
     ]
 })
 export class CustomCardListComponent implements OnInit, OnDestroy {
@@ -117,6 +120,8 @@ export class CustomCardListComponent implements OnInit, OnDestroy {
 
     private readonly ngUnsubscribe$ = new Subject<void>();
 
+    loadingInProgress = false;
+
     constructor(private readonly modalService: NgbModal) {
         ModuleRegistry.registerModules([AllCommunityModule]);
         provideGlobalGridOptions({theme: 'legacy'});
@@ -125,6 +130,12 @@ export class CustomCardListComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        OpfabEventStreamService.getLoadingInProgress()
+            .pipe(takeUntil(this.ngUnsubscribe$), debounceTime(500))
+            .subscribe((loadingInProgress: boolean) => {
+                this.loadingInProgress = loadingInProgress;
+            });
+
         this.customCardListView = new CustomCardListView(this.customScreenId);
 
         const severityCellClassRules = {
diff --git a/ui/main/src/app/components/monitoring/monitoring.component.scss b/ui/main/src/app/components/monitoring/monitoring.component.scss
index 187c78f523..d4ad58a333 100644
--- a/ui/main/src/app/components/monitoring/monitoring.component.scss
+++ b/ui/main/src/app/components/monitoring/monitoring.component.scss
@@ -1,4 +1,4 @@
-/* Copyright (c) 2018-2024, RTE (http://www.rte-france.com)
+/* Copyright (c) 2018-2025, RTE (http://www.rte-france.com)
  * See AUTHORS.txt
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -11,16 +11,6 @@
     color: var(--opfab-text-color);
 }
 
-.opfab-loading-spinner {
-    float: right;
-    margin-right: 5%;
-    font-size: 30px;
-    border: solid 1px var(--opfab-bgcolor);
-    text-align: center;
-    background-color: var(--opfab-bgcolor);
-    color: #aaa;
-}
-
 .opfab-response-checkbox {
     float: left;
     margin-left: 5%;
diff --git a/ui/main/src/scss/styles.scss b/ui/main/src/scss/styles.scss
index 5c68bf1e0b..9782bc5417 100644
--- a/ui/main/src/scss/styles.scss
+++ b/ui/main/src/scss/styles.scss
@@ -720,3 +720,13 @@ tag-input {
 }
 
 // END CUSTOM STYLE FOR DATE RANGE PICKER
+
+.opfab-loading-spinner {
+    float: right;
+    margin-right: 5%;
+    font-size: 30px;
+    border: solid 1px var(--opfab-bgcolor);
+    text-align: center;
+    background-color: var(--opfab-bgcolor);
+    color: #aaa;
+}