Enhancement: optimize tasks / stats reload (#7402)

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 getStatistics(): Observable<Statistics> {
-    return this.http.get(`${environment.apiBaseUrl}statistics/`)
-  }
+  private unsubscribeNotifer: Subject<any> = new Subject()
 
   reload() {
+    if (this.loading) return
     this.loading = true
-    this.getStatistics().subscribe((statistics) => {
-      this.loading = false
-      const fileTypeMax = 5
-      if (statistics.document_file_type_counts?.length > fileTypeMax) {
-        const others = statistics.document_file_type_counts.slice(fileTypeMax)
-        statistics.document_file_type_counts =
-          statistics.document_file_type_counts.slice(0, fileTypeMax)
-        statistics.document_file_type_counts.push({
-          mime_type: $localize`Other`,
-          mime_type_count: others.reduce(
-            (currentValue, documentFileType) =>
-              documentFileType.mime_type_count + currentValue,
-            0
-          ),
-        })
-      }
-      this.statistics = statistics
-    })
+    this.http
+      .get<Statistics>(`${environment.apiBaseUrl}statistics/`)
+      .pipe(takeUntil(this.unsubscribeNotifer), first())
+      .subscribe((statistics) => {
+        this.loading = false
+        const fileTypeMax = 5
+        if (statistics.document_file_type_counts?.length > fileTypeMax) {
+          const others = statistics.document_file_type_counts.slice(fileTypeMax)
+          statistics.document_file_type_counts =
+            statistics.document_file_type_counts.slice(0, fileTypeMax)
+          statistics.document_file_type_counts.push({
+            mime_type: $localize`Other`,
+            mime_type_count: others.reduce(
+              (currentValue, documentFileType) =>
+                documentFileType.mime_type_count + currentValue,
+              0
+            ),
+          })
+        }
+        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() {