Frontend better handle slow backend requests

src-ui/src/app/services/document-list-view.service.spec.ts

@@ -103,6 +103,7 @@ describe('DocumentListViewService', () => {
   })
 
   afterEach(() => {
+    documentListViewService.cancelPending()
     httpTestingController.verify()
     sessionStorage.clear()
   })
@@ -425,4 +426,13 @@ describe('DocumentListViewService', () => {
     })
     expect(documentListViewService.selected.size).toEqual(3)
   })
+
+  it('should cancel on reload the list', () => {
+    const cancelSpy = jest.spyOn(documentListViewService, 'cancelPending')
+    documentListViewService.reload()
+    httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&tags__id__all=9`
+    )
+    expect(cancelSpy).toHaveBeenCalled()
+  })
 })

src-ui/src/app/services/document-list-view.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 import { ParamMap, Router } from '@angular/router'
-import { Observable, first } from 'rxjs'
+import { Observable, Subject, first, takeUntil } from 'rxjs'
 import { FilterRule } from '../data/filter-rule'
 import {
   filterRulesDiffer,
@@ -82,6 +82,8 @@ export class DocumentListViewService {
 
   currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
 
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
   private listViewStates: Map<number, ListViewState> = new Map()
 
   private _activeSavedViewId: number = null
@@ -143,6 +145,10 @@ export class DocumentListViewService {
     return this.listViewStates.get(this._activeSavedViewId)
   }
 
+  public cancelPending(): void {
+    this.unsubscribeNotifier.next(true)
+  }
+
   activateSavedView(view: PaperlessSavedView) {
     this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
     if (view) {
@@ -210,6 +216,7 @@ export class DocumentListViewService {
   }
 
   reload(onFinish?, updateQueryParams: boolean = true) {
+    this.cancelPending()
     this.isReloading = true
     this.error = null
     let activeListViewState = this.activeListViewState
@@ -222,6 +229,7 @@ export class DocumentListViewService {
         activeListViewState.filterRules,
         { truncate_content: true }
       )
+      .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
           this.initialized = true

src-ui/src/app/services/tasks.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { first } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+import { first, takeUntil } from 'rxjs/operators'
 import {
   PaperlessTask,
   PaperlessTaskStatus,
@@ -14,10 +15,12 @@ import { environment } from 'src/environments/environment'
 export class TasksService {
   private baseUrl: string = environment.apiBaseUrl
 
-  loading: boolean
+  public loading: boolean
 
   private fileTasks: PaperlessTask[] = []
 
+  private unsubscribeNotifer: Subject<any> = new Subject()
+
   public get total(): number {
     return this.fileTasks.length
   }
@@ -51,7 +54,7 @@ export class TasksService {
 
     this.http
       .get<PaperlessTask[]>(`${this.baseUrl}tasks/`)
-      .pipe(first())
+      .pipe(takeUntil(this.unsubscribeNotifer), first())
       .subscribe((r) => {
         this.fileTasks = r.filter((t) => t.type == PaperlessTaskType.File) // they're all File tasks, for now
         this.loading = false
@@ -63,9 +66,13 @@ export class TasksService {
       .post(`${this.baseUrl}acknowledge_tasks/`, {
         tasks: [...task_ids],
       })
-      .pipe(first())
+      .pipe(takeUntil(this.unsubscribeNotifer), first())
       .subscribe((r) => {
         this.reload()
       })
   }
+
+  public cancelPending(): void {
+    this.unsubscribeNotifer.next(true)
+  }
 }