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] 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[] = []