loading indicator for dashboard widgets

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>
 

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
       })
   }

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>

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
     })
   }

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>
 

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 {}
 }