fix(button): button suffering from FOUC in certain cases (#16403)

* fix(button): button suffering from FOUC in certain cases

* fix(ESF): Fixed a test in ESF search component.

---------

Co-authored-by: Galina Edinakova <gedinakova@infragistics.com>

Author: simeonoff

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

@@ -8,7 +8,7 @@ import {
     Output,
     booleanAttribute,
     inject,
-    afterRenderEffect,
+    AfterViewInit,
 } from '@angular/core';
 import { PlatformUtil } from '../../core/utils';
 
@@ -20,8 +20,9 @@ export const IgxBaseButtonType = {
 
 
 @Directive()
-export abstract class IgxButtonBaseDirective {
+export abstract class IgxButtonBaseDirective implements AfterViewInit{
     private _platformUtil = inject(PlatformUtil);
+    private _viewInit = false;
 
     /**
      * Emitted when the button is clicked.
@@ -101,15 +102,16 @@ export abstract class IgxButtonBaseDirective {
         // 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');
-                    });
-                }
+            this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+        }
+    }
+
+    public ngAfterViewInit(): void {
+        if (this._platformUtil.isBrowser && !this._viewInit) {
+            this._viewInit = true;
+
+            requestAnimationFrame(() => {
+                this.element.nativeElement.style.removeProperty('--_init-transition');
             });
         }
     }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -6580,27 +6580,24 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             // Scroll the search list to the bottom.
             let scrollbar = GridFunctions.getExcelStyleSearchComponentScrollbar(fix);
+            expect(scrollbar.scrollTop).toBe(0);
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems[0].innerText).toBe('Select All');
+
             scrollbar.scrollTop = 3000;
             await wait();
             fix.detectChanges();
+            expect(listItems[0].innerText).not.toBe('Select All');
+            expect(scrollbar.scrollTop).toBeGreaterThan(300);
 
             // Select another column
             GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
             await wait();
             fix.detectChanges();
 
             // Update scrollbar
-            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
             scrollbar = GridFunctions.getExcelStyleSearchComponentScrollbar(fix);
-            await wait();
-            fix.detectChanges();
-
-            // Get the display container and its parent and verify that the display container is at start
-            const displayContainer = searchComponent.querySelector('igx-display-container');
-            const displayContainerRect = displayContainer.getBoundingClientRect();
-            const parentContainerRect = displayContainer.parentElement.getBoundingClientRect();
-
-            expect(displayContainerRect.top - parentContainerRect.top <= 1).toBe(true, 'search scrollbar did not reset');
+            expect(scrollbar.scrollTop).toBe(0, 'search scrollbar did not reset');
         });
     });