refactor(core): removing a pending task delays stability until the next tick (angular#57570)

This commit updates the public API for pending tasks to schedule an application tick, effectively making the stability async when the last task is removed. PR Close angular#57570

Author: atscott

packages/core/src/change_detection/scheduling/zoneless_scheduling.ts

@@ -47,6 +47,9 @@ export const enum NotificationSource {
  ViewDetachedFromDOM,
  // Applying animations might result in new DOM state and should rerun render hooks
  AsyncAnimationsLoaded,
+ // The scheduler is notified when a pending task is removed via the public API.
+ // This allows us to make stability async, delayed until the next application tick.
+ PendingTaskRemoved,
 }
 
 /**

packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts

@@ -153,6 +153,15 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
  force = true;
  break;
  }
+ case NotificationSource.PendingTaskRemoved: {
+ // Removing a pending task via the public API forces a scheduled tick, ensuring that
+ // stability is async and delayed until there was at least an opportunity to run
+ // application synchronization. This prevents some footguns when working with the
+ // public API for pending tasks where developers attempt to update application state
+ // immediately after removing the last task.
+ force = true;
+ break;
+ }
  case NotificationSource.ViewDetachedFromDOM:
  case NotificationSource.ViewAttached:
  case NotificationSource.RenderHook:
@@ -229,6 +238,14 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
  return;
  }
 
+ // If we reach the tick and there is no work to be done in ApplicationRef.tick,
+ // skip it altogether and clean up. There may be no work if, for example, the only
+ // event that notified the scheduler was the removal of a pending task.
+ if (this.appRef.dirtyFlags === ApplicationRefDirtyFlags.None) {
+ this.cleanup();
+ return;
+ }
+
  // The scheduler used to pass "whether to check views" as a boolean flag instead of setting
  // fine-grained dirtiness flags, and global checking was always used on the first pass. This
  // created an interesting edge case: if a notification made a view dirty and then ticked via the

packages/core/src/pending_tasks.ts

@@ -11,6 +11,10 @@ import {BehaviorSubject} from 'rxjs';
 import {inject} from './di/injector_compatibility';
 import {ɵɵdefineInjectable} from './di/interface/defs';
 import {OnDestroy} from './interface/lifecycle_hooks';
+import {
+ ChangeDetectionScheduler,
+ NotificationSource,
+} from './change_detection/scheduling/zoneless_scheduling';
 
 /**
  * Internal implementation of the pending tasks service.
@@ -82,13 +86,18 @@ export class PendingTasks implements OnDestroy {
  */
 export class ExperimentalPendingTasks {
  private internalPendingTasks = inject(PendingTasks);
+ private scheduler = inject(ChangeDetectionScheduler);
  /**
  * Adds a new task that should block application's stability.
  * @returns A cleanup function that removes a task when called.
  */
  add(): () => void {
  const taskId = this.internalPendingTasks.add();
- return () => this.internalPendingTasks.remove(taskId);
+ return () => {
+ // Notifying the scheduler will hold application stability open until the next tick.
+ this.scheduler.notify(NotificationSource.PendingTaskRemoved);
+ this.internalPendingTasks.remove(taskId);
+ };
  }
 
  /** @nocollapse */

packages/core/test/acceptance/pending_tasks_spec.ts

@@ -72,9 +72,12 @@ describe('public ExperimentalPendingTasks', () => {
  const appRef = TestBed.inject(ApplicationRef);
  const pendingTasks = TestBed.inject(ExperimentalPendingTasks);
 
- const taskA = pendingTasks.add();
+ const removeTaskA = pendingTasks.add();
+ await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(false);
+ removeTaskA();
+ // stability is delayed until a tick happens
  await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(false);
- taskA();
+ TestBed.inject(ApplicationRef).tick();
  await expectAsync(applicationRefIsStable(appRef)).toBeResolvedTo(true);
  });
 });