fix(cdk/overlay): avoid over-subscribing to afterNextRender

Currently the `OverlayRef` subscribes to `afterNextRender` on init and unsubscribes on dispose. This isn't necessary, because we only use `afterNextRender` during the `dispose` sequence.

These changes switch to only subscribing when we need to.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -16,11 +16,10 @@ import {
   afterNextRender,
   afterRender,
   untracked,
-  AfterRenderRef,
 } from '@angular/core';
 import {Location} from '@angular/common';
 import {Observable, Subject, merge, SubscriptionLike, Subscription} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {take} from 'rxjs/operators';
 import {OverlayKeyboardDispatcher} from './dispatchers/overlay-keyboard-dispatcher';
 import {OverlayOutsideClickDispatcher} from './dispatchers/overlay-outside-click-dispatcher';
 import {OverlayConfig} from './overlay-config';
@@ -39,7 +38,7 @@ export type ImmutableObject<T> = {
  */
 export class OverlayRef implements PortalOutlet {
   private _backdropElement: HTMLElement | null = null;
-  private _backdropTimeout: number | undefined;
+  private _backdropTimeout: ReturnType<typeof setTimeout> | undefined;
   private readonly _backdropClick = new Subject<MouseEvent>();
   private readonly _attachments = new Subject<void>();
   private readonly _detachments = new Subject<void>();
@@ -63,10 +62,6 @@ export class OverlayRef implements PortalOutlet {
   /** Stream of mouse outside events dispatched to this overlay. */
   readonly _outsidePointerEvents = new Subject<MouseEvent>();
 
-  private _renders = new Subject<void>();
-
-  private _afterRenderRef: AfterRenderRef;
-
   constructor(
     private _portalOutlet: PortalOutlet,
     private _host: HTMLElement,
@@ -86,18 +81,6 @@ export class OverlayRef implements PortalOutlet {
     }
 
     this._positionStrategy = _config.positionStrategy;
-
-    // Users could open the overlay from an `effect`, in which case we need to
-    // run the `afterRender` as `untracked`. We don't recommend that users do
-    // this, but we also don't want to break users who are doing it.
-    this._afterRenderRef = untracked(() =>
-      afterRender(
-        () => {
-          this._renders.next();
-        },
-        {injector: this._injector},
-      ),
-    );
   }
 
   /** The overlay's HTML element */
@@ -275,8 +258,6 @@ export class OverlayRef implements PortalOutlet {
     }
 
     this._detachments.complete();
-    this._afterRenderRef.destroy();
-    this._renders.complete();
   }
 
   /** Whether the overlay has attached content. */
@@ -516,28 +497,38 @@ export class OverlayRef implements PortalOutlet {
     // Normally we wouldn't have to explicitly run this outside the `NgZone`, however
     // if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will
     // be patched to run inside the zone, which will throw us into an infinite loop.
+    // We can't remove the host here immediately, because the overlay pane's content
+    // might still be animating. This stream helps us avoid interrupting the animation
+    // by waiting for the pane to become empty.
     this._ngZone.runOutsideAngular(() => {
-      // We can't remove the host here immediately, because the overlay pane's content
-      // might still be animating. This stream helps us avoid interrupting the animation
-      // by waiting for the pane to become empty.
-      const subscription = this._renders
-        .pipe(takeUntil(merge(this._attachments, this._detachments)))
-        .subscribe(() => {
-          // Needs a couple of checks for the pane and host, because
-          // they may have been removed by the time the zone stabilizes.
-          if (!this._pane || !this._host || this._pane.children.length === 0) {
-            if (this._pane && this._config.panelClass) {
-              this._toggleClasses(this._pane, this._config.panelClass, false);
+      // Users could open the overlay from an `effect`, in which case we need to
+      // run the `afterRender` as `untracked`. We don't recommend that users do
+      // this, but we also don't want to break users who are doing it.
+      const ref = untracked(() =>
+        afterRender(
+          () => {
+            // Needs a couple of checks for the pane and host, because
+            // they may have been removed by the time the zone stabilizes.
+            if (!this._pane || !this._host || this._pane.children.length === 0) {
+              if (this._pane && this._config.panelClass) {
+                this._toggleClasses(this._pane, this._config.panelClass, false);
+              }
+
+              if (this._host && this._host.parentElement) {
+                this._previousHostParent = this._host.parentElement;
+                this._host.remove();
+              }
+
+              ref.destroy();
             }
-
-            if (this._host && this._host.parentElement) {
-              this._previousHostParent = this._host.parentElement;
-              this._host.remove();
-            }
-
-            subscription.unsubscribe();
-          }
-        });
+          },
+          {injector: this._injector},
+        ),
+      );
+
+      merge(this._attachments, this._detachments)
+        .pipe(take(1))
+        .subscribe(() => ref.destroy());
     });
   }