1. Home
  2. Forum
  3. React - EJ 2
  4. Button styles applied too late - flickering

Button styles applied too late - flickering

Hello,

I am observing a flickering of buttons because it seems that the button styles of ButtonComponent are applied to late, even in production mode (nextjs).

CSS is loaded via HTML <head>, i.e. it is present on initial rendering by the browser but I guess the button's CSS class is not set before button scripts are executed? I am using nextjs with server-side rendering.

How can I prevent the flickering?

Code:
<ButtonComponent iconCss='e-icons e-add-new-icon'>
Button text
</ButtonComponent>

Regards,
Steffen

3 Replies
MK Mohan Kumar Ramasamy Syncfusion Team September 22, 2020 04:36 PM UTC

Hi Steffen, 
 
We have checked your reported query, In nextjs, usually Html elements rendered before CSS styles loads this cause the flickering effect in UI. We need to check nextjs to load the CSS styles before html renders. We are also checking the possibility to achieve this and let you know once we found the solution. We appreciate your patience until then. 
 
Regards, 
Mohankumar R 


SH Steffen Harbich October 8, 2020 08:21 AM UTC

Please note that the CSS is loaded early enough because my styles for buttons are applied immediately. I suspect that the CSS class of syncfusion Button is applied not early enough but that's just a guess.

Any insights here?

SP Sangeetha Priya Murugan Syncfusion Team October 31, 2020 07:04 AM UTC

Hi Steffan, 
 
Thank you for your patience. 
 
We have prepared the sample with nextjs and checked your issue with latest node_modules. The button component is rendered without any flickering. In this, we have referred our CSS files as global files. So, we have prepared video for this and attached the sample for your reference. 
 
 
 
Could you please check the video and sample and replicate your issue in the given sample, which is very helpful to provide you a solution. 
 
Regards, 
Sangeetha M 


Loader.
Up arrow icon