fix(button): prevent style flickering on initial render (#16137)

Author: desig9stein

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

@@ -61,10 +61,10 @@
         $variant
     );
 
-    $button-transition: color $time ease-in-out,
-        background-color $time ease-in-out,
-        border-color $time ease-in-out,
-        box-shadow $time ease-in-out;
+    $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;
 

projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -73,8 +73,10 @@
         -webkit-tap-highlight-color: transparent;
         overflow: hidden;
         white-space: nowrap;
-        transition: box-shadow .2s ease-in, background .15s ease-out;
-        transition-delay: .05s;
+        transition:
+            box-shadow var(--_init-transition, .2s) ease-in,
+            background var(--_init-transition, .15s) ease-out;
+        transition-delay: var(--_init-transition, .05s);
         min-width: unset;
         min-height: unset;
         font-size: rem(24px, 24px);
@@ -95,7 +97,9 @@
         }
 
         @if $variant == 'fluent' {
-            transition: color .15s ease-out, background .15s ease-out;
+            transition:
+                color var(--_init-transition, .15s) ease-out,
+                background var(--_init-transition, .15s) ease-out;
 
             &::after {
                 position: absolute;
@@ -109,11 +113,18 @@
         }
 
         @if $variant == 'bootstrap' {
-            transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
+            transition:
+                box-shadow var(--_init-transition, .15s) ease-out,
+                color var(--_init-transition, .15s) ease-out,
+                background var(--_init-transition, .15s) ease-out;
         }
 
         @if $variant == 'indigo' {
-            transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out;
+            transition:
+                color var(--_init-transition, .15s) ease-in-out,
+                box-shadow var(--_init-transition, .15s) ease-in-out,
+                background var(--_init-transition, .15s) ease-in-out,
+                border-color var(--_init-transition, .15s) ease-in-out;
         }
     }
 

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

@@ -1,13 +1,28 @@
-import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute } from '@angular/core';
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    Input,
+    Output,
+    booleanAttribute,
+    inject,
+    afterRenderEffect,
+} from '@angular/core';
+import { PlatformUtil } from '../../core/utils';
 
 export const IgxBaseButtonType = {
     Flat: 'flat',
     Contained: 'contained',
     Outlined: 'outlined'
 } as const;
 
+
 @Directive()
 export abstract class IgxButtonBaseDirective {
+    private _platformUtil = inject(PlatformUtil);
+
     /**
      * Emitted when the button is clicked.
      */
@@ -79,7 +94,25 @@ export abstract class IgxButtonBaseDirective {
         return this.disabled || null;
     }
 
-    constructor(public element: ElementRef) { }
+    protected constructor(
+        public element: ElementRef,
+    ) {
+        // In browser, set via native API for immediate effect (no-op on server).
+        // In SSR there is no paint, so there’s no visual rendering or transitions to suppress.
+        // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
+        if (this._platformUtil.isBrowser) {
+            afterRenderEffect({
+                write: () => {
+                    this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+                },
+                read: () => {
+                    requestAnimationFrame(() => {
+                        this.element.nativeElement.style.removeProperty('--_init-transition');
+                    });
+                }
+            });
+        }
+    }
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/directives/button/icon-button.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import {Directive, ElementRef, HostBinding, Input} from '@angular/core';
 import { IgxBaseButtonType, IgxButtonBaseDirective } from './button-base';
 
 /**
@@ -78,4 +78,10 @@ export class IgxIconButtonDirective extends IgxButtonBaseDirective {
     public get outlined(): boolean {
         return this._type === IgxBaseButtonType.Outlined;
     }
+
+    constructor(
+        public override element: ElementRef,
+    ) {
+        super(element);
+    }
 }