#379 spinner signals

frontend/src/app/shared/spinner/spinner.component.ts

@@ -1,23 +1,20 @@
-import { AsyncPipe } from '@angular/common';
 import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { Component } from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { debounceTime } from 'rxjs/operators';
 import { SpinnerService } from './spinner.service';
 
 @Component({
   selector: 'kpn-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    @if (showSpinner$ | async) {
+    @if (service.showSpinner()) {
       <mat-spinner diameter="40" />
     }
   `,
   standalone: true,
-  imports: [MatProgressSpinnerModule, AsyncPipe],
+  imports: [MatProgressSpinnerModule],
 })
 export class SpinnerComponent {
-  private readonly spinnerService = inject(SpinnerService);
-  protected readonly showSpinner$ = this.spinnerService.spinnerState$.pipe(debounceTime(300));
+  protected readonly service = inject(SpinnerService);
 }

frontend/src/app/shared/spinner/spinner.service.ts

@@ -1,23 +1,21 @@
 import { Injectable } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { List } from 'immutable';
 import { finalize } from 'rxjs';
 import { of } from 'rxjs';
 import { Observable } from 'rxjs';
 import { BehaviorSubject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { concatMap } from 'rxjs/operators';
 import { tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SpinnerService {
-  readonly spinnerState$: Observable<boolean>;
-  private readonly _spinnerState$ = new BehaviorSubject<boolean>(false);
   private activeActions: List<string> = List();
-
-  constructor() {
-    this.spinnerState$ = this._spinnerState$.asObservable();
-  }
+  private readonly _spinnerState$ = new BehaviorSubject<boolean>(false);
+  readonly showSpinner = toSignal(this._spinnerState$.pipe(debounceTime(300)));
 
   showUntilCompleted<T>(obs$: Observable<T>, action: string): Observable<T> {
     return of(null).pipe(
@@ -32,14 +30,12 @@ export class SpinnerService {
     if (this._spinnerState$.value !== true) {
       this._spinnerState$.next(true);
     }
-    // console.log(`spinner start ${action} - activeActions = ${this.activeActions}, spinnerState=${this._spinnerState}`);
   }
 
   end(action: string): void {
     this.activeActions = this.activeActions.filter((a) => a !== action);
     if (this.activeActions.isEmpty() && this._spinnerState$.value !== false) {
       this._spinnerState$.next(false);
     }
-    // console.log(`spinner end ${action} - activeActions = ${this.activeActions}, spinnerState=${this._spinnerState}`);
   }
 }