Fixhancement: display loading status for tags instead of 'Private' (#11140)

src-ui/src/app/components/common/tag/tag.component.html

@@ -9,6 +9,12 @@
   @if (clickable) {
     <a [title]="linkTitle" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>
   }
+} @else if (loading) {
+  <span class="placeholder-glow">
+    <span class="placeholder badge private">
+      <span class="text-dark">Loading...</span>
+    </span>
+  </span>
 } @else {
   @if (!clickable) {
     <span class="badge private" i18n>Private</span>

src-ui/src/app/components/common/tag/tag.component.ts

@@ -53,4 +53,8 @@ export class TagComponent {
 
   @Input()
   showParents: boolean = false
+
+  public get loading(): boolean {
+    return this.tagService.loading
+  }
 }

src-ui/src/app/services/rest/abstract-paperless-service.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
-import { map, publishReplay, refCount } from 'rxjs/operators'
+import { map, publishReplay, refCount, tap } from 'rxjs/operators'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { Results } from 'src/app/data/results'
 import { environment } from 'src/environments/environment'
@@ -13,6 +13,11 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
   protected http: HttpClient
   protected resourceName: string
 
+  protected _loading: boolean = false
+  public get loading(): boolean {
+    return this._loading
+  }
+
   constructor() {
     this.http = inject(HttpClient)
   }
@@ -43,6 +48,7 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     sortReverse?: boolean,
     extraParams?
   ): Observable<Results<T>> {
+    this._loading = true
     let httpParams = new HttpParams()
     if (page) {
       httpParams = httpParams.set('page', page.toString())
@@ -59,9 +65,15 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
         httpParams = httpParams.set(extraParamKey, extraParams[extraParamKey])
       }
     }
-    return this.http.get<Results<T>>(this.getResourceUrl(), {
+    return this.http
+      .get<Results<T>>(this.getResourceUrl(), {
         params: httpParams,
       })
+      .pipe(
+        tap(() => {
+          this._loading = false
+        })
+      )
   }
 
   private _listAll: Observable<Results<T>>
@@ -96,6 +108,7 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
   }
 
   getFew(ids: number[], extraParams?): Observable<Results<T>> {
+    this._loading = true
     let httpParams = new HttpParams()
     httpParams = httpParams.set('id__in', ids.join(','))
     httpParams = httpParams.set('ordering', '-id')
@@ -105,9 +118,15 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
         httpParams = httpParams.set(extraParamKey, extraParams[extraParamKey])
       }
     }
-    return this.http.get<Results<T>>(this.getResourceUrl(), {
+    return this.http
+      .get<Results<T>>(this.getResourceUrl(), {
         params: httpParams,
       })
+      .pipe(
+        tap(() => {
+          this._loading = false
+        })
+      )
   }
 
   clearCache() {
@@ -115,7 +134,12 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
   }
 
   get(id: number): Observable<T> {
-    return this.http.get<T>(this.getResourceUrl(id))
+    this._loading = true
+    return this.http.get<T>(this.getResourceUrl(id)).pipe(
+      tap(() => {
+        this._loading = false
+      })
+    )
   }
 
   create(o: T): Observable<T> {

src-ui/src/app/services/rest/mail-account.service.ts

@@ -7,18 +7,16 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
   providedIn: 'root',
 })
 export class MailAccountService extends AbstractPaperlessService<MailAccount> {
-  loading: boolean
-
   constructor() {
     super()
     this.resourceName = 'mail_accounts'
   }
 
   private reload() {
-    this.loading = true
+    this._loading = true
     this.listAll().subscribe((r) => {
       this.mailAccounts = r.results
-      this.loading = false
+      this._loading = false
     })
   }
 

src-ui/src/app/services/rest/mail-rule.service.ts

@@ -7,18 +7,16 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
   providedIn: 'root',
 })
 export class MailRuleService extends AbstractPaperlessService<MailRule> {
-  loading: boolean
-
   constructor() {
     super()
     this.resourceName = 'mail_rules'
   }
 
   private reload() {
-    this.loading = true
+    this._loading = true
     this.listAll().subscribe((r) => {
       this.mailRules = r.results
-      this.loading = false
+      this._loading = false
     })
   }
 

src-ui/src/app/services/rest/saved-view.service.ts

@@ -17,7 +17,6 @@ export class SavedViewService extends AbstractPaperlessService<SavedView> {
   private settingsService = inject(SettingsService)
   private documentService = inject(DocumentService)
 
-  public loading: boolean = true
   private savedViews: SavedView[] = []
   private savedViewDocumentCounts: Map<number, number> = new Map()
   private unsubscribeNotifier: Subject<void> = new Subject<void>()
@@ -38,12 +37,12 @@ export class SavedViewService extends AbstractPaperlessService<SavedView> {
       tap({
         next: (r) => {
           this.savedViews = r.results
-          this.loading = false
+          this._loading = false
           this.settingsService.dashboardIsEmpty =
             this.dashboardViews.length === 0
         },
         error: () => {
-          this.loading = false
+          this._loading = false
           this.settingsService.dashboardIsEmpty = true
         },
       })

src-ui/src/app/services/rest/workflow.service.ts

@@ -7,18 +7,16 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
   providedIn: 'root',
 })
 export class WorkflowService extends AbstractPaperlessService<Workflow> {
-  loading: boolean
-
   constructor() {
     super()
     this.resourceName = 'workflows'
   }
 
   public reload() {
-    this.loading = true
+    this._loading = true
     this.listAll().subscribe((r) => {
       this.workflows = r.results
-      this.loading = false
+      this._loading = false
     })
   }