From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 8 May 2022 16:03:29 +0000 (-0700)
Subject: loading indicator for dashboard widgets
X-Git-Tag: v1.8.0-beta.rc1~121^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=010f1f2bd1e186f78249c8a16e84900231187810;p=thirdparty%2Fpaperless-ngx.git

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 01809d1c60..8d5b9c43f3 100644
--- 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 9506e6842a..6e8b679006 100644
--- 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 a29b50f784..106d306105 100644
--- 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 a13839f197..3d9f7b5e7a 100644
--- 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 a9d3d306ad..4eaee47618 100644
--- 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 f21f6ca351..b1e926eefa 100644
--- 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 {}
 }