refactor(docs-infra): drive the progress bar from the currentNavigation signal

The progress bar listened to `NavigationStart` on `router.events`, started
a timer to show the bar after `PROGRESS_BAR_DELAY`, and used `switchMap`
to wait for the first `NavigationEnd`/`Cancel`/`Skipped`/`Error` event to
clear the timer and complete the bar.

Replace this with a single `effect` on the router's `currentNavigation`
signal: while a navigation is ongoing the effect schedules the timer, and
its cleanup, which runs when the navigation ends or is superseded, clears
the timer and completes the bar. The effect tracks the navigation id
rather than the navigation object, since `currentNavigation` notifies on
every update of an ongoing navigation and would otherwise restart the
timer mid-navigation.

Replace the disabled spec with specs that keep a navigation pending
through a resolver, covering slow, fast and canceled navigations.

Author: MeAkib

adev/src/app/core/layout/progress-bar/progress-bar.component.spec.ts

@@ -6,37 +6,83 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {provideRouter, Router} from '@angular/router';
 
 import {PROGRESS_BAR_DELAY, ProgressBarComponent} from './progress-bar.component';
-import {RouterTestingHarness} from '@angular/router/testing';
-import {provideRouter} from '@angular/router';
+
+@Component({template: ''})
+class Page {}
+
+function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 
 describe('ProgressBarComponent', () => {
   let component: ProgressBarComponent;
   let fixture: ComponentFixture<ProgressBarComponent>;
+  let router: Router;
+  let resolveSlowPage: () => void;
+  let startSpy: jasmine.Spy;
+  let completeSpy: jasmine.Spy;
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [ProgressBarComponent],
-      providers: [provideRouter([])],
+      providers: [
+        provideRouter([
+          {path: 'fast', component: Page},
+          {
+            path: 'slow',
+            component: Page,
+            resolve: {data: () => new Promise<void>((resolve) => (resolveSlowPage = resolve))},
+          },
+        ]),
+      ],
     });
 
     fixture = TestBed.createComponent(ProgressBarComponent);
     component = fixture.componentInstance;
+    router = TestBed.inject(Router);
+    await fixture.whenStable();
+
+    startSpy = spyOn(component.progressBar(), 'start');
+    completeSpy = spyOn(component.progressBar(), 'complete');
+  });
+
+  it('should start the progress bar for slow navigations and complete it when they end', async () => {
+    const navigation = router.navigateByUrl('/slow');
+    await wait(PROGRESS_BAR_DELAY * 2);
+
+    expect(startSpy).toHaveBeenCalledTimes(1);
+    expect(completeSpy).not.toHaveBeenCalled();
+
+    resolveSlowPage();
+    await navigation;
     await fixture.whenStable();
+
+    expect(startSpy).toHaveBeenCalledTimes(1);
+    expect(completeSpy).toHaveBeenCalledTimes(1);
   });
 
-  // This test often timeouts
-  // We suspect a racing condition inside the RouterTestingHarness.
-  // Until this has been investigated, we will skip this test.
-  xit('should call progressBar.complete() on route change', async () => {
-    const progressBarCompleteSpy = spyOn(component.progressBar(), 'complete');
+  it('should not start the progress bar for navigations faster than the delay', async () => {
+    await router.navigateByUrl('/fast');
+    await fixture.whenStable();
+    await wait(PROGRESS_BAR_DELAY * 2);
 
-    const harness = await RouterTestingHarness.create();
-    await harness.navigateByUrl('/');
+    expect(startSpy).not.toHaveBeenCalled();
+  });
+
+  it('should complete the progress bar when a navigation is canceled', async () => {
+    const navigation = router.navigateByUrl('/slow');
+    await wait(PROGRESS_BAR_DELAY * 2);
+    expect(startSpy).toHaveBeenCalledTimes(1);
+
+    router.currentNavigation()?.abort();
+    await navigation;
+    await fixture.whenStable();
 
-    await new Promise((resolve) => setTimeout(resolve, PROGRESS_BAR_DELAY));
-    expect(progressBarCompleteSpy).toHaveBeenCalled();
+    expect(completeSpy).toHaveBeenCalledTimes(1);
   });
 });

adev/src/app/core/layout/progress-bar/progress-bar.component.ts

@@ -7,17 +7,9 @@
  */
 
 import {isPlatformServer} from '@angular/common';
-import {Component, inject, PLATFORM_ID, viewChild} from '@angular/core';
-import {
-  NavigationCancel,
-  NavigationEnd,
-  NavigationError,
-  NavigationSkipped,
-  NavigationStart,
-  Router,
-} from '@angular/router';
+import {Component, computed, effect, inject, PLATFORM_ID, viewChild} from '@angular/core';
+import {Router} from '@angular/router';
 import {NgProgressbar, NgProgressRef} from 'ngx-progressbar';
-import {filter, map, switchMap, take} from 'rxjs';
 
 /** Time to wait after navigation starts before showing the progress bar. This delay allows a small amount of time to skip showing the progress bar when a navigation is effectively immediate. 30ms is approximately the amount of time we can wait before a delay is perceptible.*/
 export const PROGRESS_BAR_DELAY = 30;
@@ -34,6 +26,12 @@ export class ProgressBarComponent {
 
   isServer = isPlatformServer(inject(PLATFORM_ID));
 
+  /**
+   * Id of the ongoing navigation, or `null` when there is none. The `currentNavigation` signal
+   * notifies on every update of the same navigation, the id only changes once per navigation.
+   */
+  private readonly navigationId = computed(() => this.router.currentNavigation()?.id ?? null);
+
   constructor() {
     this.setupPageNavigationDimming();
   }
@@ -45,34 +43,17 @@ export class ProgressBarComponent {
     if (this.isServer) {
       return;
     }
-    this.router.events
-      .pipe(
-        filter((e) => e instanceof NavigationStart),
-        map(() => {
-          // Only apply set the property if the navigation is not "immediate"
-          return setTimeout(() => {
-            this.progressBar().start();
-          }, PROGRESS_BAR_DELAY);
-        }),
-        switchMap((timeoutId) => {
-          return this.router.events.pipe(
-            filter((e) => {
-              return (
-                e instanceof NavigationEnd ||
-                e instanceof NavigationCancel ||
-                e instanceof NavigationSkipped ||
-                e instanceof NavigationError
-              );
-            }),
-            take(1),
-            map(() => timeoutId),
-          );
-        }),
-      )
-      .subscribe((timeoutId) => {
-        // When the navigation finishes, prevent the navigating class from being applied in the timeout.
+    effect((onCleanup) => {
+      if (this.navigationId() === null) {
+        return;
+      }
+      // Only show the progress bar if the navigation is not "immediate".
+      const timeoutId = setTimeout(() => this.progressBar().start(), PROGRESS_BAR_DELAY);
+      // Runs when the navigation ends (completed, skipped, canceled or errored) or is superseded.
+      onCleanup(() => {
         clearTimeout(timeoutId);
         this.progressBar().complete();
       });
+    });
   }
 }