Add loading spinner in custom card list screen (#7904)

Signed-off-by: vlo-rte <[email protected]>
opfab · Feb 27, 2025 · 72b7b8d · 72b7b8d
1 parent fef955d
commit 72b7b8d
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git 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,14 +86,26 @@ <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
                 <input type="checkbox" formControlName="responseFromAllEntities" />
                 <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
@@ -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
@@ -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
@@ -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
@@ -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;
+}