refactor(core): cleanup prefetch triggers when resource loading starts

This commit adds the necessary mechanisms to perform cleanup of prefetch triggers when resource loading starts. Previously, this logic was missing, which resulted in retaining those triggers.

packages/core/src/render3/instructions/defer.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken, Injector} from '../../di';
+import {InjectionToken, Injector, ɵɵdefineInjectable} from '../../di';
 import {findMatchingDehydratedView} from '../../hydration/views';
 import {populateDehydratedViewsInContainer} from '../../linker/view_container_ref';
 import {assertDefined, assertEqual, throwError} from '../../util/assert';
 import {assertIndexInDeclRange, assertLContainer, assertTNodeForLView} from '../assert';
 import {bindingUpdated} from '../bindings';
 import {getComponentDef, getDirectiveDef, getPipeDef} from '../definition';
 import {CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
-import {DEFER_BLOCK_STATE, DeferBlockBehavior, DeferBlockConfig, DeferBlockInternalState, DeferBlockState, DeferDependenciesLoadingState, DeferredLoadingBlockConfig, DeferredPlaceholderBlockConfig, DependencyResolverFn, LDeferBlockDetails, TDeferBlockDetails} from '../interfaces/defer';
+import {DEFER_BLOCK_STATE, DeferBlockBehavior, DeferBlockConfig, DeferBlockInternalState, DeferBlockState, DeferBlockTriggers, DeferDependenciesLoadingState, DeferredLoadingBlockConfig, DeferredPlaceholderBlockConfig, DependencyResolverFn, LDeferBlockDetails, TDeferBlockDetails} from '../interfaces/defer';
 import {DirectiveDefList, PipeDefList} from '../interfaces/definition';
 import {TContainerNode, TNode} from '../interfaces/node';
 import {isDestroyed, isLContainer, isLView} from '../interfaces/type_checks';
@@ -182,14 +182,20 @@ export function ɵɵdeferPrefetchOnIdle() {
   const tDetails = getTDeferBlockDetails(tView, tNode);
 
   if (tDetails.loadingState === DeferDependenciesLoadingState.NOT_STARTED) {
-    // Set loading to the scheduled state, so that we don't register it again.
-    tDetails.loadingState = DeferDependenciesLoadingState.SCHEDULED;
-
-    // In case of prefetching, we intentionally avoid cancelling prefetching if
-    // an underlying LView get destroyed (thus passing `null` as a second argument),
-    // because there might be other LViews (that represent embedded views) that
-    // depend on resource loading.
-    onIdle(() => triggerPrefetching(tDetails, lView), null /* LView */);
+    // Prevent scheduling more than one `requestIdleCallback` call
+    // for each defer block. For this reason we use only a trigger
+    // identifier in a key, so all instances would use the same key.
+    const key = String(DeferBlockTriggers.OnIdle);
+    const injector = lView[INJECTOR]!;
+    const manager = injector.get(DeferBlockCleanupManager);
+    if (!manager.has(tDetails, key)) {
+      // In case of prefetching, we intentionally avoid cancelling resource loading if
+      // an underlying LView get destroyed (thus passing `null` as a second argument),
+      // because there might be other LViews (that represent embedded views) that
+      // depend on resource loading.
+      const cleanupFn = onIdle(() => triggerPrefetching(tDetails, lView), null /* LView */);
+      registerTDetailsCleanup(injector, tDetails, key, cleanupFn);
+    }
   }
 }
 
@@ -272,7 +278,7 @@ export function ɵɵdeferPrefetchOnViewport(target?: unknown) {}  // TODO: imple
  *    helpful for cases when a defer block has scheduled rendering, but an underlying
  *    LView got destroyed prior to th block rendering.
  */
-function onIdle(callback: VoidFunction, lView: LView|null) {
+function onIdle(callback: VoidFunction, lView: LView|null): VoidFunction {
   let id: number;
   const removeIdleCallback = () => _cancelIdleCallback(id);
   id = _requestIdleCallback(() => {
@@ -291,6 +297,7 @@ function onIdle(callback: VoidFunction, lView: LView|null) {
     // is invoked.
     storeLViewOnDestroy(lView, removeIdleCallback);
   }
+  return removeIdleCallback;
 }
 
 /**
@@ -423,8 +430,7 @@ export function triggerResourceLoading(tDetails: TDeferBlockDetails, lView: LVie
   const injector = lView[INJECTOR]!;
   const tView = lView[TVIEW];
 
-  if (tDetails.loadingState !== DeferDependenciesLoadingState.NOT_STARTED &&
-      tDetails.loadingState !== DeferDependenciesLoadingState.SCHEDULED) {
+  if (tDetails.loadingState !== DeferDependenciesLoadingState.NOT_STARTED) {
     // If the loading status is different from initial one, it means that
     // the loading of dependencies is in progress and there is nothing to do
     // in this function. All details can be obtained from the `tDetails` object.
@@ -454,6 +460,10 @@ export function triggerResourceLoading(tDetails: TDeferBlockDetails, lView: LVie
     return;
   }
 
+  // Defer block may have multiple prefetch triggers. Once the loading
+  // starts, invoke all clean functions, since they are no longer needed.
+  invokeTDetailsCleanup(injector, tDetails);
+
   // Start downloading of defer block dependencies.
   tDetails.loadingPromise = Promise.allSettled(dependenciesFn()).then(results => {
     let failed = false;
@@ -565,7 +575,6 @@ function triggerDeferBlock(lView: LView, tNode: TNode) {
 
   switch (tDetails.loadingState) {
     case DeferDependenciesLoadingState.NOT_STARTED:
-    case DeferDependenciesLoadingState.SCHEDULED:
       triggerResourceLoading(tDetails, lView);
 
       // The `loadingState` might have changed to "loading".
@@ -693,3 +702,71 @@ export function getDeferBlocks(lView: LView, deferBlocks: DeferBlockDetails[]) {
     }
   }
 }
+
+/**
+ * Registers a cleanup function associated with a prefetching trigger
+ * of a given defer block.
+ */
+function registerTDetailsCleanup(
+    injector: Injector, tDetails: TDeferBlockDetails, key: string, cleanupFn: VoidFunction) {
+  injector.get(DeferBlockCleanupManager).add(tDetails, key, cleanupFn);
+}
+
+/**
+ * Invokes all registered prefetch cleanup triggers
+ * and removes all cleanup functions afterwards.
+ */
+function invokeTDetailsCleanup(injector: Injector, tDetails: TDeferBlockDetails) {
+  injector.get(DeferBlockCleanupManager).cleanup(tDetails);
+}
+
+/**
+ * Internal service to keep track of cleanup functions associated
+ * with defer blocks. This class is used to manage cleanup functions
+ * created for prefetching triggers.
+ */
+class DeferBlockCleanupManager {
+  private blocks = new Map<TDeferBlockDetails, Map<string, VoidFunction[]>>();
+
+  add(tDetails: TDeferBlockDetails, key: string, callback: VoidFunction) {
+    if (!this.blocks.has(tDetails)) {
+      this.blocks.set(tDetails, new Map());
+    }
+    const block = this.blocks.get(tDetails)!;
+    if (!block.has(key)) {
+      block.set(key, []);
+    }
+    const callbacks = block.get(key)!;
+    callbacks.push(callback);
+  }
+
+  has(tDetails: TDeferBlockDetails, key: string): boolean {
+    return this.blocks.has(tDetails) && this.blocks.get(tDetails)!.has(key);
+  }
+
+  cleanup(tDetails: TDeferBlockDetails) {
+    const block = this.blocks.get(tDetails);
+    if (block) {
+      for (const callbacks of Object.values(block)) {
+        for (const callback of callbacks) {
+          callback();
+        }
+      }
+      block.clear();
+    }
+  }
+
+  ngOnDestroy() {
+    for (const [block] of this.blocks) {
+      this.cleanup(block);
+    }
+    this.blocks.clear();
+  }
+
+  /** @nocollapse */
+  static ɵprov = /** @pureOrBreakMyCode */ ɵɵdefineInjectable({
+    token: DeferBlockCleanupManager,
+    providedIn: 'root',
+    factory: () => new DeferBlockCleanupManager(),
+  });
+}

packages/core/src/render3/interfaces/defer.ts

@@ -14,16 +14,25 @@ import type {DependencyType} from './definition';
  */
 export type DependencyResolverFn = () => Array<Promise<DependencyType>>;
 
+/**
+ * Enumerates all `on` triggers of a defer block.
+ */
+export enum DeferBlockTriggers {
+  OnIdle,
+  OnTimer,
+  OnImmediate,
+  OnHover,
+  OnInteraction,
+  OnViewport,
+}
+
 /**
  * Describes the state of defer block dependency loading.
  */
 export enum DeferDependenciesLoadingState {
   /** Initial state, dependency loading is not yet triggered */
   NOT_STARTED,
 
-  /** Dependency loading was scheduled (e.g. `on idle`), but has not started yet */
-  SCHEDULED,
-
   /** Dependency loading is in progress */
   IN_PROGRESS,