Enhancement: optimize tasks / stats reload (#7402)

src-ui/messages.xlf

@@ -5565,7 +5565,7 @@
         <source>Other</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">67</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8187573012244728580" datatype="html">

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts

@@ -71,6 +71,13 @@ describe('StatisticsWidgetComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
+  it('should not call statistics endpoint on reload if already loading', () => {
+    httpTestingController.expectOne(`${environment.apiBaseUrl}statistics/`)
+    component.loading = true
+    component.reload()
+    httpTestingController.expectNone(`${environment.apiBaseUrl}statistics/`)
+  })
+
   it('should display inbox link with count', () => {
     const mockStats = {
       documents_total: 200,

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { Observable, Subscription } from 'rxjs'
+import { first, Observable, Subject, Subscription, takeUntil } from 'rxjs'
 import { FILTER_HAS_TAGS_ANY } from 'src/app/data/filter-rule-type'
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
@@ -35,7 +35,7 @@ export class StatisticsWidgetComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  loading: boolean = true
+  loading: boolean = false
 
   constructor(
     private http: HttpClient,
@@ -48,31 +48,32 @@ export class StatisticsWidgetComponent
   statistics: Statistics = {}
 
   subscription: Subscription
-
+  private unsubscribeNotifer: Subject<any> = new Subject()
-  private getStatistics(): Observable<Statistics> {
-    return this.http.get(`${environment.apiBaseUrl}statistics/`)
-  }
 
   reload() {
+    if (this.loading) return
     this.loading = true
-    this.getStatistics().subscribe((statistics) => {
+    this.http
-      this.loading = false
+      .get<Statistics>(`${environment.apiBaseUrl}statistics/`)
-      const fileTypeMax = 5
+      .pipe(takeUntil(this.unsubscribeNotifer), first())
-      if (statistics.document_file_type_counts?.length > fileTypeMax) {
+      .subscribe((statistics) => {
-        const others = statistics.document_file_type_counts.slice(fileTypeMax)
+        this.loading = false
-        statistics.document_file_type_counts =
+        const fileTypeMax = 5
-          statistics.document_file_type_counts.slice(0, fileTypeMax)
+        if (statistics.document_file_type_counts?.length > fileTypeMax) {
-        statistics.document_file_type_counts.push({
+          const others = statistics.document_file_type_counts.slice(fileTypeMax)
-          mime_type: $localize`Other`,
+          statistics.document_file_type_counts =
-          mime_type_count: others.reduce(
+            statistics.document_file_type_counts.slice(0, fileTypeMax)
-            (currentValue, documentFileType) =>
+          statistics.document_file_type_counts.push({
-              documentFileType.mime_type_count + currentValue,
+            mime_type: $localize`Other`,
-            0
+            mime_type_count: others.reduce(
-          ),
+              (currentValue, documentFileType) =>
-        })
+                documentFileType.mime_type_count + currentValue,
-      }
+              0
-      this.statistics = statistics
+            ),
-    })
+          })
+        }
+        this.statistics = statistics
+      })
   }
 
   getFileTypeExtension(filetype: DocumentFileType): string {
@@ -105,6 +106,8 @@ export class StatisticsWidgetComponent
 
   ngOnDestroy(): void {
     this.subscription.unsubscribe()
+    this.unsubscribeNotifer.next(true)
+    this.unsubscribeNotifer.complete()
   }
 
   goToInbox() {

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

@@ -39,6 +39,12 @@ describe('TasksService', () => {
     expect(req.request.method).toEqual('GET')
   })
 
+  it('does not call tasks api endpoint on reload if already loading', () => {
+    tasksService.loading = true
+    tasksService.reload()
+    httpTestingController.expectNone(`${environment.apiBaseUrl}tasks/`)
+  })
+
   it('calls acknowledge_tasks api endpoint on dismiss and reloads', () => {
     tasksService.dismissTasks(new Set([1, 2, 3]))
     const req = httpTestingController.expectOne(

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

@@ -50,6 +50,7 @@ export class TasksService {
   constructor(private http: HttpClient) {}
 
   public reload() {
+    if (this.loading) return
     this.loading = true
 
     this.http