From 904f603b26c51c56f1dd3729df920fbb54b599fa Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 28 Apr 2025 19:08:51 +0200
Subject: [PATCH] fix(material/tabs): flicker when animationDuration is set to
 zero (#30966)

The tabs have a fallback that sets `transition-delay: 1ms` in case users disabled animations without going through one of our APIs. That was also applying when they set `animationDuration="0"` which is a supported API. The result was a slight flicker.

These changes resolve the flicker by treating `animationDuration="0"` in the same way as if animations were disabled globally.

Fixes #30964.
---
 goldens/material/tabs/index.api.md |  2 +-
 src/material/tabs/tab-group.html   |  2 +-
 src/material/tabs/tab-group.ts     | 12 ++++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/goldens/material/tabs/index.api.md b/goldens/material/tabs/index.api.md
index 0300c84ba53f..a8c203df0a99 100644
--- a/goldens/material/tabs/index.api.md
+++ b/goldens/material/tabs/index.api.md
@@ -247,7 +247,7 @@ export class MatTabGroup implements AfterViewInit, AfterContentInit, AfterConten
     get animationDuration(): string;
     set animationDuration(value: string | number);
     // (undocumented)
-    _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
+    protected _animationsDisabled(): boolean;
     ariaLabel: string;
     ariaLabelledby: string;
     // @deprecated
diff --git a/src/material/tabs/tab-group.html b/src/material/tabs/tab-group.html
index 2d0f433eebb5..2db906b31bfb 100644
--- a/src/material/tabs/tab-group.html
+++ b/src/material/tabs/tab-group.html
@@ -65,7 +65,7 @@
 
 <div
   class="mat-mdc-tab-body-wrapper"
-  [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
+  [class._mat-animation-noopable]="_animationsDisabled()"
   #tabBodyWrapper>
   @for (tab of _tabs; track tab;) {
     <mat-tab-body role="tabpanel"
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index ca67944b8ff3..600f7aec40e3 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -100,8 +100,8 @@ export class MatTabGroup
   private _tabsSubscription = Subscription.EMPTY;
   private _tabLabelSubscription = Subscription.EMPTY;
   private _tabBodySubscription = Subscription.EMPTY;
-
-  _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _diAnimationsDisabled =
+    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
 
   /**
    * All tabs inside the tab group. This includes tabs that belong to groups that are nested
@@ -578,6 +578,14 @@ export class MatTabGroup
       this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex));
     }
   }
+
+  protected _animationsDisabled(): boolean {
+    return (
+      this._diAnimationsDisabled ||
+      this.animationDuration === '0' ||
+      this.animationDuration === '0ms'
+    );
+  }
 }
 
 /** A simple change event emitted on focus or selection changes. */