From 1951e9a41cfa93fc0be475139a4202f28810bf1f Mon Sep 17 00:00:00 2001
From: Kevin Buhmann <kbuhmann@vmware.com>
Date: Tue, 23 Jan 2024 08:40:07 -0600
Subject: [PATCH] fix(button): skip animation on first render of loading button
 (#1155)

This is a port of 669297716df9695cccaec6cf7599ed1ba394dba4 (#1141) to 17.x.

The button text/content should only be faded when transitioning to or
from a non-default state.

CDE-1596
closes #1075
---
 .../angular/src/button/button-loading/loading-button.ts  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/projects/angular/src/button/button-loading/loading-button.ts b/projects/angular/src/button/button-loading/loading-button.ts
index 1907a6ab99..2cbe7af784 100644
--- a/projects/angular/src/button/button-loading/loading-button.ts
+++ b/projects/angular/src/button/button-loading/loading-button.ts
@@ -16,7 +16,7 @@ const MIN_BUTTON_WIDTH = 42;
 @Component({
   selector: 'button[clrLoading]',
   template: `
-    <ng-container [ngSwitch]="state">
+    <div @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -30,10 +30,15 @@ const MIN_BUTTON_WIDTH = 42;
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </ng-container>
+    </div>
   `,
   providers: [{ provide: LoadingListener, useExisting: ClrLoadingButton }],
   animations: [
+    trigger('parent', [
+      // Skip :enter animation on first render.
+      // The button text/content should only be faded when transitioning to or from a non-default state.
+      transition(':enter', []),
+    ]),
     trigger('defaultButton', [
       transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
       // TODO: see if we can get leave animation to work before spinner's enter animation