From 010f1f2bd1e186f78249c8a16e84900231187810 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 8 May 2022 09:03:29 -0700
Subject: [PATCH 1/3] loading indicator for dashboard widgets

---
 .../saved-view-widget/saved-view-widget.component.html        | 2 +-
 .../widgets/saved-view-widget/saved-view-widget.component.ts  | 4 ++++
 .../statistics-widget/statistics-widget.component.html        | 2 +-
 .../widgets/statistics-widget/statistics-widget.component.ts  | 4 ++++
 .../widgets/widget-frame/widget-frame.component.html          | 4 ++++
 .../dashboard/widgets/widget-frame/widget-frame.component.ts  | 3 +++
 6 files changed, 17 insertions(+), 2 deletions(-)

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 01809d1c6..8d5b9c43f 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 9506e6842..6e8b67900 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 a29b50f78..106d30610 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 a13839f19..3d9f7b5e7 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 a9d3d306a..4eaee4761 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 f21f6ca35..b1e926eef 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 {}
 }

From 7f7ec625c89520aac2d76ac2a02cbc7f9c3500b0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 8 May 2022 14:16:37 -0700
Subject: [PATCH 2/3] loading indicators for sidebar saved views

---
 .../src/app/components/app-frame/app-frame.component.html | 3 ++-
 .../src/app/components/app-frame/app-frame.component.scss | 5 +++++
 src-ui/src/app/services/rest/saved-view.service.ts        | 8 +++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index d90d3b2d9..8f480dea4 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -70,8 +70,9 @@
           </li>
         </ul>
 
-        <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.sidebarViews.length > 0'>
+        <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews.length > 0'>
           <ng-container i18n>Saved views</ng-container>
+          <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 5fe408660..296df26c3 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -9,6 +9,11 @@
   z-index: 995; /* Behind the navbar */
   padding: 50px 0 0; /* Height of navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+
+  .sidebar-heading .spinner-border {
+    width: 0.8em;
+    height: 0.8em;
+  }
 }
 @media (max-width: 767.98px) {
   .sidebar {
diff --git a/src-ui/src/app/services/rest/saved-view.service.ts b/src-ui/src/app/services/rest/saved-view.service.ts
index dae205cb3..46df5e72c 100644
--- a/src-ui/src/app/services/rest/saved-view.service.ts
+++ b/src-ui/src/app/services/rest/saved-view.service.ts
@@ -9,13 +9,19 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
   providedIn: 'root',
 })
 export class SavedViewService extends AbstractPaperlessService<PaperlessSavedView> {
+  loading: boolean
+
   constructor(http: HttpClient) {
     super(http, 'saved_views')
     this.reload()
   }
 
   private reload() {
-    this.listAll().subscribe((r) => (this.savedViews = r.results))
+    this.loading = true
+    this.listAll().subscribe((r) => {
+      this.savedViews = r.results
+      this.loading = false
+    })
   }
 
   private savedViews: PaperlessSavedView[] = []

From b30c4275ef50eaa477e05828fee0c9c2e729b823 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 8 May 2022 14:17:11 -0700
Subject: [PATCH 3/3] dashboard loading indicator, remove duplicate call to
 saved views

---
 .../components/dashboard/dashboard.component.html |  9 +++++++--
 .../components/dashboard/dashboard.component.ts   | 15 ++-------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html
index cfb25b96e..4b6bc223b 100644
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
@@ -21,9 +21,14 @@
 
 <div class='row'>
   <div class="col-lg-8">
-    <app-welcome-widget *ngIf="savedViews.length == 0"></app-welcome-widget>
+    <ng-container *ngIf="savedViewService.loading">
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      <ng-container i18n>Loading...</ng-container>
+    </ng-container>
 
-    <ng-container *ngFor="let v of savedViews">
+    <app-welcome-widget *ngIf="!savedViewService.loading && savedViewService.dashboardViews.length == 0"></app-welcome-widget>
+
+    <ng-container *ngFor="let v of savedViewService.dashboardViews">
       <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
     </ng-container>
 
diff --git a/src-ui/src/app/components/dashboard/dashboard.component.ts b/src-ui/src/app/components/dashboard/dashboard.component.ts
index 3dd648212..640883f6f 100644
--- a/src-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/src-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 
 @Component({
@@ -8,8 +7,8 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })
-export class DashboardComponent implements OnInit {
-  constructor(private savedViewService: SavedViewService, private meta: Meta) {}
+export class DashboardComponent {
+  constructor(public savedViewService: SavedViewService, private meta: Meta) {}
 
   get displayName() {
     let tagFullName = this.meta.getTag('name=full_name')
@@ -30,14 +29,4 @@ export class DashboardComponent implements OnInit {
       return $localize`Welcome to Paperless-ngx!`
     }
   }
-
-  savedViews: PaperlessSavedView[] = []
-
-  ngOnInit(): void {
-    this.savedViewService.listAll().subscribe((results) => {
-      this.savedViews = results.results.filter(
-        (savedView) => savedView.show_on_dashboard
-      )
-    })
-  }
 }