fix(components/indicators)!: replace @angular/animations in tokens component with CSS transitions (#4303)

BREAKING CHANGE

`SkyTokensComponent` has replaced `@angular/animations` with CSS
transitions. Tests that interact with tokens may need to add
`provideNoopSkyAnimations()` from `@skyux/core` to their `TestBed`
providers to disable SKY UX CSS transitions during tests.

```
import { provideNoopSkyAnimations } from '@skyux/core';

TestBed.configureTestingModule({
  providers: [provideNoopSkyAnimations()],
});
```

Author: Blackbaud-SteveBrush

libs/components/indicators/package.json

@@ -16,7 +16,6 @@
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
-    "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",

libs/components/indicators/src/lib/modules/tokens/fixtures/tokens-fixtures.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { SkyTokensModule } from '../tokens.module';
 
@@ -8,7 +7,7 @@ import { SkyTokensTestComponent } from './tokens.component.fixture';
 
 @NgModule({
   declarations: [SkyTokenTestComponent, SkyTokensTestComponent],
-  imports: [NoopAnimationsModule, SkyTokensModule],
+  imports: [SkyTokensModule],
   exports: [SkyTokenTestComponent, SkyTokensTestComponent],
 })
 export class SkyTokensFixturesModule {}

libs/components/indicators/src/lib/modules/tokens/token.component.scss

@@ -2,6 +2,13 @@
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 @use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
 
+:host {
+  interpolate-size: allow-keywords;
+  flex: 0 0 auto;
+  display: inline-flex;
+  padding: var(--sky-token-gutter, 0);
+}
+
 @include compatMixins.sky-default-overrides('.sky-token') {
   --sky-override-token-active-background-color: #{darken(
       $sky-background-color-info-light,

libs/components/indicators/src/lib/modules/tokens/token.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SkyAppTestUtility, expectAsync } from '@skyux-sdk/testing';
-import { SkyIdService } from '@skyux/core';
+import { SkyIdService, provideNoopSkyAnimations } from '@skyux/core';
 
 import { SkyTokenComponent } from '../tokens/token.component';
 import { SkyTokensModule } from '../tokens/tokens.module';
@@ -11,6 +11,7 @@ describe('Token component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [SkyTokensModule],
+      providers: [provideNoopSkyAnimations()],
     });
 
     // Mock the ID service.

libs/components/indicators/src/lib/modules/tokens/tokens.component.html

@@ -1,6 +1,7 @@
 <div
   class="sky-tokens"
-  [@blockAnimationOnLoad]
+  [class.sky-tokens-animation-ready]="animationReady()"
+  [class.sky-tokens-animation-enabled]="trackWith"
   [attr.role]="tokens.length ? 'grid' : null"
 >
   <!--
@@ -9,13 +10,12 @@
     -->
   @for (token of tokens; track trackTokenFn(i, token); let i = $index) {
     <sky-token
-      [@.disabled]="!trackWith"
-      [@dismiss]
+      animate.enter="sky-token-enter"
+      animate.leave="sky-token-leave"
       [disabled]="disabled"
       [dismissible]="dismissible"
       [focusable]="focusable"
       [role]="'row'"
-      (@dismiss.done)="animationDone()"
       (dismiss)="removeToken(token)"
       (click)="onTokenClick(token)"
       (keydown)="onTokenKeyDown($event)"

libs/components/indicators/src/lib/modules/tokens/tokens.component.scss

@@ -2,20 +2,57 @@
 
 $sky-tokens-gutter-size: 2px;
 
+@keyframes sky-token-enter-animation {
+  from {
+    opacity: 0;
+    width: 0;
+    padding: 0;
+  }
+
+  to {
+    opacity: 1;
+    width: auto;
+  }
+}
+
+@keyframes sky-token-leave-animation {
+  from {
+    opacity: 1;
+    width: auto;
+  }
+
+  to {
+    opacity: 0;
+    width: 0;
+    padding: 0;
+  }
+}
+
 .sky-tokens {
+  --sky-token-gutter: #{$sky-tokens-gutter-size};
+
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   margin: -1 * $sky-tokens-gutter-size;
 
-  .sky-tokens-content,
-  ::ng-deep sky-token {
-    flex: 0 0 auto;
-    display: inline-flex;
-    padding: $sky-tokens-gutter-size;
+  &.sky-tokens-animation-enabled sky-token.sky-token-leave {
+    animation: sky-token-leave-animation var(--sky-transition-time-short)
+      ease-in forwards;
+    overflow: hidden;
+  }
+
+  &.sky-tokens-animation-ready.sky-tokens-animation-enabled
+    sky-token.sky-token-enter {
+    animation: sky-token-enter-animation var(--sky-transition-time-short)
+      ease-in;
+    overflow: hidden;
   }
 
   .sky-tokens-content {
+    flex: 0 0 auto;
+    display: inline-flex;
+    padding: $sky-tokens-gutter-size;
     flex-grow: 1;
     flex-basis: 0px;
 

libs/components/indicators/src/lib/modules/tokens/tokens.component.spec.ts

@@ -5,7 +5,7 @@ import {
   tick,
 } from '@angular/core/testing';
 import { SkyAppTestUtility, expect, expectAsync } from '@skyux-sdk/testing';
-import { SkyLiveAnnouncerService } from '@skyux/core';
+import { SkyLiveAnnouncerService, provideNoopSkyAnimations } from '@skyux/core';
 
 import { Subject } from 'rxjs';
 
@@ -84,6 +84,7 @@ describe('Tokens component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [SkyTokensFixturesModule],
+      providers: [provideNoopSkyAnimations()],
     });
 
     fixture = TestBed.createComponent(SkyTokensTestComponent);

libs/components/indicators/src/lib/modules/tokens/tokens.component.ts

@@ -1,16 +1,18 @@
-import { animate, style, transition, trigger } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  Injector,
   Input,
   OnDestroy,
   Output,
   QueryList,
   TrackByFunction,
   ViewChildren,
+  afterNextRender,
   inject,
+  signal,
 } from '@angular/core';
 
 import { Subject, Subscription } from 'rxjs';
@@ -34,33 +36,6 @@ const DISPLAY_WITH_DEFAULT = 'name';
   templateUrl: './tokens.component.html',
   styleUrls: ['./tokens.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('blockAnimationOnLoad', [transition(':enter', [])]),
-    trigger('dismiss', [
-      transition(':enter', [
-        style({
-          opacity: 0,
-          width: 0,
-        }),
-        animate(
-          '150ms ease-in',
-          style({
-            opacity: 1,
-            width: '*',
-          }),
-        ),
-      ]),
-      transition(':leave', [
-        animate(
-          '150ms ease-in',
-          style({
-            opacity: 0,
-            width: 0,
-          }),
-        ),
-      ]),
-    ]),
-  ],
   standalone: false,
 })
 export class SkyTokensComponent implements OnDestroy {
@@ -138,6 +113,8 @@ export class SkyTokensComponent implements OnDestroy {
     // get accessor when set to `undefined`. Emitting `value` instead of `this.#_tokensOrDefault`
     // preserves that behavior.
     this.tokensChange.emit(value);
+
+    this.#queueTokensRenderedEmit();
   }
 
   public get tokens(): SkyToken[] {
@@ -223,13 +200,31 @@ export class SkyTokensComponent implements OnDestroy {
 
   #messageStreamSub: Subscription | undefined;
   #ngUnsubscribe = new Subject<void>();
+  #tokensRenderedQueued = false;
 
-  #changeDetector = inject(ChangeDetectorRef);
+  readonly #changeDetector = inject(ChangeDetectorRef);
+  readonly #injector = inject(Injector);
 
   #_activeIndex = 0;
   #_messageStream = new Subject<SkyTokensMessage>();
 
+  /**
+   * Tracks whether the component has completed its initial render.
+   * Used to suppress enter animations on first load.
+   */
+  protected readonly animationReady = signal(false);
+
   constructor() {
+    // Wait for Angular's animation scheduler to remove initial enter classes
+    // before enabling enter animations for future token changes.
+    afterNextRender({
+      read: () => {
+        requestAnimationFrame(() => {
+          this.animationReady.set(true);
+        });
+      },
+    });
+
     this.#initMessageStream();
 
     // Angular calls the trackBy function without applying the component instance's scope.
@@ -257,10 +252,6 @@ export class SkyTokensComponent implements OnDestroy {
     this.#notifyTokenSelected(token);
   }
 
-  public animationDone(): void {
-    this.tokensRendered.emit();
-  }
-
   public onTokenKeyDown(event: KeyboardEvent): void {
     if (!this.disabled) {
       switch (event.key) {
@@ -369,4 +360,26 @@ export class SkyTokensComponent implements OnDestroy {
       token,
     });
   }
+
+  /**
+   * Debounces the tokensRendered emit so that rapid token changes
+   * (e.g. bulk additions or removals) result in a single event.
+   */
+  #queueTokensRenderedEmit(): void {
+    if (this.#tokensRenderedQueued) {
+      return;
+    }
+
+    this.#tokensRenderedQueued = true;
+
+    afterNextRender(
+      () => {
+        this.#tokensRenderedQueued = false;
+        this.tokensRendered.emit();
+      },
+      {
+        injector: this.#injector,
+      },
+    );
+  }
 }

libs/components/indicators/testing/src/modules/tokens/fixtures/tokens-harness-test.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SkyTokensModule } from '@skyux/indicators';
 
 import { TokensHarnessTestComponent } from './tokens-harness-test.component';
 
 @NgModule({
-  imports: [NoopAnimationsModule, SkyTokensModule],
+  imports: [SkyTokensModule],
   declarations: [TokensHarnessTestComponent],
 })
 export class TokensHarnessTestModule {}

libs/components/indicators/testing/src/modules/tokens/tokens-harness.spec.ts

@@ -1,6 +1,7 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideNoopSkyAnimations } from '@skyux/core';
 
 import { TokensHarnessTestComponent } from './fixtures/tokens-harness-test.component';
 import { TokensHarnessTestModule } from './fixtures/tokens-harness-test.module';
@@ -14,6 +15,7 @@ describe('Tokens harness', () => {
   }> {
     await TestBed.configureTestingModule({
       imports: [TokensHarnessTestModule],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(TokensHarnessTestComponent);