fix(button): prevent style flickering on initial render by leveraging '--_ig-init-transition'

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(--_ig-init-transition, #{$time}) ease-in-out,
+        background-color var(--_ig-init-transition, #{$time}) ease-in-out,
+        border-color var(--_ig-init-transition, #{$time}) ease-in-out,
+        box-shadow var(--_ig-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(--_ig-init-transition, .2s) ease-in,
+            background var(--_ig-init-transition, .15s) ease-out;
+        transition-delay: var(--_ig-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(--_ig-init-transition, .15s) ease-out,
+                background var(--_ig-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(--_ig-init-transition, .15s) ease-out,
+                color var(--_ig-init-transition, .15s) ease-out,
+                background var(--_ig-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(--_ig-init-transition, .15s) ease-in-out,
+                box-shadow var(--_ig-init-transition, .15s) ease-in-out,
+                background var(--_ig-init-transition, .15s) ease-in-out,
+                border-color var(--_ig-init-transition, .15s) ease-in-out;
         }
     }
 

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

@@ -1,4 +1,6 @@
-import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute } from '@angular/core';
+import {
+    Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute, AfterViewInit,
+} from '@angular/core';
 
 export const IgxBaseButtonType = {
     Flat: 'flat',
@@ -7,7 +9,7 @@ export const IgxBaseButtonType = {
 } as const;
 
 @Directive()
-export abstract class IgxButtonBaseDirective {
+export abstract class IgxButtonBaseDirective implements AfterViewInit {
     /**
      * Emitted when the button is clicked.
      */
@@ -79,7 +81,14 @@ 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
+        this.element.nativeElement.style.setProperty('--_ig-init-transition', '0s');
+    }
 
     /**
      * @hidden
@@ -98,4 +107,11 @@ export abstract class IgxButtonBaseDirective {
     public get nativeElement() {
         return this.element.nativeElement;
     }
+
+    public ngAfterViewInit() {
+        // Remove after the first frame to re-enable transitions
+        requestAnimationFrame(() => {
+            this.element.nativeElement.style.removeProperty('--_ig-init-transition');
+        });
+    }
 }

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);
+    }
 }