Refactor: loading component

src-ui/src/app/components/admin/config/config.component.ts

@@ -17,9 +17,9 @@ import {
 } from 'src/app/data/paperless-config'
 import { ConfigService } from 'src/app/services/config.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import { SettingsService } from 'src/app/services/settings.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-config',
@@ -27,7 +27,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   styleUrl: './config.component.scss',
 })
 export class ConfigComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
   public readonly ConfigOptionType = ConfigOptionType
@@ -45,15 +45,11 @@ export class ConfigComponent
     return PaperlessConfigOptions.filter((o) => o.category === category)
   }
 
-  public loading: boolean = false
-
   initialConfig: PaperlessConfig
   store: BehaviorSubject<any>
   storeSub: Subscription
   isDirty$: Observable<boolean>
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(
     private configService: ConfigService,
     private toastService: ToastService,
@@ -67,7 +63,6 @@ export class ConfigComponent
   }
 
   ngOnInit(): void {
-    this.loading = true
     this.configService
       .getConfig()
       .pipe(takeUntil(this.unsubscribeNotifier))

src-ui/src/app/components/admin/logs/logs.component.html

@@ -17,7 +17,7 @@
       </a>
     </li>
   }
-  @if (isLoading || !logFiles.length) {
+  @if (loading || !logFiles.length) {
     <div class="ps-2 d-flex align-items-center">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       @if (!logFiles.length) {
@@ -30,7 +30,7 @@
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
 <div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
-  @if (isLoading && logFiles.length) {
+  @if (loading && logFiles.length) {
     <div>
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -3,22 +3,28 @@ import {
   ElementRef,
   OnInit,
   ViewChild,
-  OnDestroy,
   ChangeDetectorRef,
+  OnDestroy,
 } from '@angular/core'
-import { Subject, takeUntil } from 'rxjs'
+import { takeUntil } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss'],
 })
-export class LogsComponent implements OnInit, OnDestroy {
+export class LogsComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit, OnDestroy
+{
   constructor(
     private logService: LogService,
     private changedetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    super()
+  }
 
   public logs: string[] = []
 
@@ -26,22 +32,17 @@ export class LogsComponent implements OnInit, OnDestroy {
 
   public activeLog: string
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
-  public isLoading: boolean = false
-
   public autoRefreshInterval: any
 
   @ViewChild('logContainer') logContainer: ElementRef
 
   ngOnInit(): void {
-    this.isLoading = true
     this.logService
       .list()
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((result) => {
         this.logFiles = result
-        this.isLoading = false
+        this.loading = false
         if (this.logFiles.length > 0) {
           this.activeLog = this.logFiles[0]
           this.reloadLogs()
@@ -51,25 +52,24 @@ export class LogsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(true)
-    this.unsubscribeNotifier.complete()
+    super.ngOnDestroy()
     clearInterval(this.autoRefreshInterval)
   }
 
   reloadLogs() {
-    this.isLoading = true
+    this.loading = true
     this.logService
       .get(this.activeLog)
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
           this.logs = result
-          this.isLoading = false
+          this.loading = false
           this.scrollToBottom()
         },
         error: () => {
           this.logs = []
-          this.isLoading = false
+          this.loading = false
         },
       })
   }

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -12,7 +12,7 @@ import {
 import { PaperlessTask } from 'src/app/data/paperless-task'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 export enum TaskTab {
   Queued = 'queued',
@@ -37,7 +37,7 @@ const FILTER_TARGETS = [
   styleUrls: ['./tasks.component.scss'],
 })
 export class TasksComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
   public activeTab: TaskTab
@@ -70,8 +70,6 @@ export class TasksComponent
       : FILTER_TARGETS.slice(0, 1)
   }
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   get dismissButtonText(): string {
     return this.selectedTasks.size > 0
       ? $localize`Dismiss selected`
@@ -101,9 +99,9 @@ export class TasksComponent
   }
 
   ngOnDestroy() {
+    super.ngOnDestroy()
     this.tasksService.cancelPending()
     clearInterval(this.autoRefreshInterval)
-    this.unsubscribeNotifier.next(this)
   }
 
   dismissTask(task: PaperlessTask) {

src-ui/src/app/components/admin/trash/trash.component.html

@@ -38,7 +38,7 @@
             </tr>
         </thead>
         <tbody>
-            @if (isLoading) {
+            @if (loading) {
                 <tr>
                     <td colspan="5">
                     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -88,7 +88,7 @@
     </table>
 </div>
 
-@if (!isLoading) {
+@if (!loading) {
     <div class="d-flex mb-2">
         <div>
             <ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -4,25 +4,26 @@ import { Document } from 'src/app/data/document'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { delay, Subject, takeUntil, tap } from 'rxjs'
+import { delay, takeUntil, tap } from 'rxjs'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { Router } from '@angular/router'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-trash',
   templateUrl: './trash.component.html',
   styleUrl: './trash.component.scss',
 })
-export class TrashComponent implements OnDestroy {
+export class TrashComponent
+  extends LoadingComponentWithPermissions
+  implements OnDestroy
+{
   public documentsInTrash: Document[] = []
   public selectedDocuments: Set<number> = new Set()
   public allToggled: boolean = false
   public page: number = 1
   public totalDocuments: number
-  public isLoading: boolean = false
-  public reveal: boolean = false
-  unsubscribeNotifier: Subject<void> = new Subject()
 
   constructor(
     private trashService: TrashService,
@@ -31,16 +32,12 @@ export class TrashComponent implements OnDestroy {
     private settingsService: SettingsService,
     private router: Router
   ) {
+    super()
     this.reload()
   }
 
-  ngOnDestroy() {
-    this.unsubscribeNotifier.next()
-    this.unsubscribeNotifier.complete()
-  }
-
   reload() {
-    this.isLoading = true
+    this.loading = true
     this.trashService
       .getTrash(this.page)
       .pipe(
@@ -48,12 +45,12 @@ export class TrashComponent implements OnDestroy {
           this.documentsInTrash = r.results
           this.totalDocuments = r.count
           this.selectedDocuments.clear()
+          this.loading = false
         }),
         delay(100)
       )
       .subscribe(() => {
         this.reveal = true
-        this.isLoading = false
       })
   }