refactor(button): ensure the button works in SSR

Author: simeonoff

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

@@ -61,10 +61,10 @@
         $variant
     );
 
-    $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-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

@@ -74,9 +74,9 @@
         overflow: hidden;
         white-space: nowrap;
         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);
+            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);
@@ -98,8 +98,8 @@
 
         @if $variant == 'fluent' {
             transition:
-                color var(--_ig-init-transition, .15s) ease-out,
-                background var(--_ig-init-transition, .15s) ease-out;
+                color var(--_init-transition, .15s) ease-out,
+                background var(--_init-transition, .15s) ease-out;
 
             &::after {
                 position: absolute;
@@ -114,17 +114,17 @@
 
         @if $variant == 'bootstrap' {
             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;
+                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 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;
+                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,15 +1,29 @@
 import {
-    Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute, AfterViewInit,
+    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 implements AfterViewInit {
+export abstract class IgxButtonBaseDirective {
+    private _platformUtil = inject(PlatformUtil);
+    private _elementRef = inject(ElementRef);
+
     /**
      * Emitted when the button is clicked.
      */
@@ -87,7 +101,18 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit {
         // 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');
+        if (this._platformUtil.isBrowser) {
+            afterRenderEffect({
+                write: () => {
+                    this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+                },
+                read: () => {
+                    requestAnimationFrame(() => {
+                        this.element.nativeElement.style.removeProperty('--_init-transition');
+                    });
+                }
+            });
+        }
     }
 
     /**
@@ -107,11 +132,4 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit {
     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');
-        });
-    }
 }