fix(button): prevent initial transition flicker (#16858)

Define --_button-transition in button theme and temporarily disable
transitions during init, restoring them on the next animation frame to
avoid style flickering.

---------

Co-authored-by: Alexander M <niron_hsc@yahoo.com>
Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>

Author: 3 people

projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss

@@ -61,11 +61,6 @@
         $variant
     );
 
-    $button-transition: color var(--_init-transition, #{$time}) ease-in-out,
-        background-color var(--_init-transition, #{$time}) ease-in-out,
-        border-color var(--_init-transition, #{$time}) ease-in-out,
-        box-shadow var(--_init-transition, #{$time}) ease-in-out;
-
     $button-disabled-shadow: none;
 
     $button-floating-width: rem(56px);
@@ -287,6 +282,12 @@
     }
 
     %igx-button-display {
+        --_button-transition:
+            color var(--_init-transition, #{$time}) ease-in-out,
+            background-color var(--_init-transition, #{$time}) ease-in-out,
+            border-color var(--_init-transition, #{$time}) ease-in-out,
+            box-shadow var(--_init-transition, #{$time}) ease-in-out;
+
         @include sizable();
 
         position: relative;
@@ -312,7 +313,7 @@
         -webkit-tap-highlight-color: transparent;
         overflow: hidden;
         white-space: nowrap;
-        transition: $button-transition;
+        transition: var(--_button-transition);
         gap: pad-inline(
             map.get($items-gap, 'compact'),
             map.get($items-gap, 'cosy'),
@@ -330,7 +331,7 @@
             width: var(--igx-icon-size, #{$icon-in-button-size});
             height: var(--igx-icon-size, #{$icon-in-button-size});
             font-size: var(--igx-icon-size, #{$icon-in-button-size});
-            transition: $button-transition;
+            transition: var(--_button-transition);
         }
     }
 
@@ -525,7 +526,7 @@
         color: var-get($outlined-theme, 'focus-visible-foreground');
         border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
-        @if $variant == 'material'  or $variant == 'bootstrap' {
+        @if $variant == 'material' or $variant == 'bootstrap' {
             igx-icon {
                 color: var-get($outlined-theme, 'icon-color-hover');
             }
@@ -701,7 +702,7 @@
         align-items: center;
         outline: none;
         cursor: pointer;
-        transition: $button-transition;
+        transition: var(--_button-transition);
         user-select: none;
         -webkit-tap-highlight-color: transparent;
         overflow: hidden;

projects/igniteui-angular/directives/src/directives/button/button-base.ts

@@ -105,6 +105,7 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit, OnDestroy
         // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
         if (this._platformUtil.isBrowser) {
             this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+            this.element.nativeElement.style.setProperty('transition', 'none');
         }
     }
 
@@ -114,6 +115,7 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit, OnDestroy
 
             this._animationScheduler = animationFrameScheduler.schedule(() => {
                 this.element.nativeElement.style.removeProperty('--_init-transition');
+                this.element.nativeElement.style.setProperty('transition', 'var(--_button-transition)');
             });
         }
     }