fix(material/tabs): use ResizeObserver to react to size changes

Author: mmalerba

src/material/tabs/BUILD.bazel

@@ -30,6 +30,7 @@ ng_module(
         "//src/cdk/coercion",
         "//src/cdk/keycodes",
         "//src/cdk/observers",
+        "//src/cdk/observers/private",
         "//src/cdk/platform",
         "//src/cdk/portal",
         "//src/cdk/scrolling",

src/material/tabs/paginated-tab-header.ts

@@ -6,41 +6,43 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
+import {SharedResizeObserver} from '@angular/cdk/observers/private';
+import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
+import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
-  ChangeDetectorRef,
-  ElementRef,
-  NgZone,
-  Optional,
-  QueryList,
-  EventEmitter,
+  ANIMATION_MODULE_TYPE,
   AfterContentChecked,
   AfterContentInit,
   AfterViewInit,
-  OnDestroy,
+  ChangeDetectorRef,
   Directive,
+  ElementRef,
+  EventEmitter,
   Inject,
   Input,
+  NgZone,
+  OnDestroy,
+  Optional,
+  Output,
+  QueryList,
   booleanAttribute,
+  inject,
   numberAttribute,
-  Output,
-  ANIMATION_MODULE_TYPE,
 } from '@angular/core';
-import {Direction, Directionality} from '@angular/cdk/bidi';
-import {ViewportRuler} from '@angular/cdk/scrolling';
-import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
-import {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
 import {
-  merge,
-  of as observableOf,
-  Subject,
   EMPTY,
-  Observer,
   Observable,
-  timer,
+  Observer,
+  Subject,
   fromEvent,
+  merge,
+  of as observableOf,
+  timer,
 } from 'rxjs';
-import {take, switchMap, startWith, skip, takeUntil, filter} from 'rxjs/operators';
-import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
+import {debounceTime, filter, skip, startWith, switchMap, takeUntil} from 'rxjs/operators';
 
 /** Config used to bind passive event listeners */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({
@@ -153,6 +155,8 @@ export abstract class MatPaginatedTabHeader
   /** Event emitted when a label is focused. */
   @Output() readonly indexFocused: EventEmitter<number> = new EventEmitter<number>();
 
+  private _sharedResizeObserver = inject(SharedResizeObserver);
+
   constructor(
     protected _elementRef: ElementRef<HTMLElement>,
     protected _changeDetectorRef: ChangeDetectorRef,
@@ -192,7 +196,18 @@ export abstract class MatPaginatedTabHeader
 
   ngAfterContentInit() {
     const dirChange = this._dir ? this._dir.change : observableOf('ltr');
-    const resize = this._viewportRuler.change(150);
+    // We need to debounce resize events because the alignment logic is expensive.
+    // If someone animates the width of tabs, we don't want to realign on every animation frame.
+    // Once we haven't seen any more resize events in the last 32ms (~2 animaion frames) we can
+    // re-align.
+    const resize = this._sharedResizeObserver
+      .observe(this._elementRef.nativeElement)
+      .pipe(debounceTime(32));
+    // Note: we do not actually need to watch these events for proper functioning of the tabs,
+    // the resize events above should capture any viewport resize that we care about. However,
+    // removing this is fairly breaking for screenshot tests, so we're leaving it here for now.
+    const viewportResize = this._viewportRuler.change(150);
+
     const realign = () => {
       this.updatePagination();
       this._alignInkBarToSelectedTab();
@@ -207,15 +222,9 @@ export abstract class MatPaginatedTabHeader
 
     this._keyManager.updateActiveItem(this._selectedIndex);
 
-    // Defer the first call in order to allow for slower browsers to lay out the elements.
-    // This helps in cases where the user lands directly on a page with paginated tabs.
-    // Note that we use `onStable` instead of `requestAnimationFrame`, because the latter
-    // can hold up tests that are in a background tab.
-    this._ngZone.onStable.pipe(take(1)).subscribe(realign);
-
-    // On dir change or window resize, realign the ink bar and update the orientation of
+    // On dir change or resize, realign the ink bar and update the orientation of
     // the key manager if the direction has changed.
-    merge(dirChange, resize, this._items.changes, this._itemsResized())
+    merge(dirChange, viewportResize, resize, this._items.changes, this._itemsResized())
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => {
         // We need to defer this to give the browser some time to recalculate