loading indicators for sidebar saved views

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 d90d3b2d9d646935613e27dd20ab46a922892c81..8f480dea4db11d95a92f5218ff2492716a4cf8c8 100644 (file)
--- 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 5fe408660b6dc3ed1d99bfc0461ad19bcc7b42f9..296df26c3e59f86898a9eef3f6cf602f0c95cfe1 100644 (file)
--- 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 dae205cb34c8cb8a82e3bcae85360e2189c0ce3a..46df5e72cf8a25f3109215f292db4699b70fd8c4 100644 (file)
--- 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[] = []