loading indicator for dashboard widgets

diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
index 01809d1c601b74ce57ae61f131c23f2ff54bf5ca..8d5b9c43f359ab19c617891c611ab77b4d01abf7 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -1,4 +1,4 @@
-<app-widget-frame [title]="savedView.name">
+<app-widget-frame [title]="savedView.name" [loading]="loading">
 
   <a class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
 

diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
index 9506e6842ad86822099c38b9ce22b5916486adac..6e8b679006b11fe0dd5bbd4deff8d392b9aadf07 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@@ -15,6 +15,8 @@ import { QueryParamsService } from 'src/app/services/query-params.service'
   styleUrls: ['./saved-view-widget.component.scss'],
 })
 export class SavedViewWidgetComponent implements OnInit, OnDestroy {
+  loading: boolean = true
+
   constructor(
     private documentService: DocumentService,
     private router: Router,
@@ -43,6 +45,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
   }
 
   reload() {
+    this.loading = true
     this.documentService
       .listFiltered(
         1,
@@ -52,6 +55,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
         this.savedView.filter_rules
       )
       .subscribe((result) => {
+        this.loading = false
         this.documents = result.results
       })
   }

diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
index a29b50f78460f28f2a0822de3aebe26710833b47..106d306105979ba238a9a8eb02355602142cd543 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
@@ -1,4 +1,4 @@
-<app-widget-frame title="Statistics" i18n-title>
+<app-widget-frame title="Statistics" [loading]="loading" i18n-title>
   <ng-container content>
     <p class="card-text" i18n *ngIf="statistics?.documents_inbox != null">Documents in inbox: {{statistics?.documents_inbox}}</p>
     <p class="card-text" i18n>Total documents: {{statistics?.documents_total}}</p>

diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
index a13839f197fa50dc7e53db7033e2541216559179..3d9f7b5e7ac59fbb0a33a2930416f73e2644317e 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
@@ -15,6 +15,8 @@ export interface Statistics {
   styleUrls: ['./statistics-widget.component.scss'],
 })
 export class StatisticsWidgetComponent implements OnInit, OnDestroy {
+  loading: boolean = true
+
   constructor(
     private http: HttpClient,
     private consumerStatusService: ConsumerStatusService
@@ -29,7 +31,9 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
   }
 
   reload() {
+    this.loading = true
     this.getStatistics().subscribe((statistics) => {
+      this.loading = false
       this.statistics = statistics
     })
   }

diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
index a9d3d306ad1bde318859552732aade6686bcb3dc..4eaee47618ab3d4e7aec00edb33b089e5a7cb9b7 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
@@ -2,6 +2,10 @@
   <div class="card-header">
     <div class="d-flex justify-content-between align-items-center">
       <h5 class="card-title mb-0">{{title}}</h5>
+      <ng-container *ngIf="loading">
+        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+        <div class="visually-hidden" i18n>Loading...</div>
+      </ng-container>
       <ng-content select ="[header-buttons]"></ng-content>
     </div>
 

diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
index f21f6ca351145ff3c558ccf4461dbc4e45f0f5f2..b1e926eefa28260e2283a22ce1bfa0ed0d56cd7f 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
@@ -11,5 +11,8 @@ export class WidgetFrameComponent implements OnInit {
   @Input()
   title: string
 
+  @Input()
+  loading: boolean = false
+
   ngOnInit(): void {}
 }