Visible delay when applying primereact css in nextjs project

[gygabyte017]

Describe the bug

I noticed that when a nextjs page is loaded, you can see on the screen some partial css applied and, after a few milliseconds, the whole css rules are applied correctly. This delay is kind of visible by the user.

Please check the reproduce section.

Can you explain whether this is a bug from Primereact, or something wrong with NextJs, or is the intended behavior?

Thank you very much.
Regards

Reproducer

https://stackblitz.com/edit/stackblitz-starters-fkxhva?file=app%2Fpage.tsx

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Any

Steps to reproduce the behavior

Please check the reproducer. In the reproducer, you can see a simple empty project with NextJS and Primereact; in the page, you can see a simple Button component with a custom width to highlight the label positioning delay (for example, this is the simplest example I can come with); the label should be centered in the button, however when the page reloads it is on the left; then quickly the correct css is applied, and you can see it even going to the center with an (unexpected) animation.

In the image, a screenshot of the label unexpectedly moving from left to center.

Expected behavior

The label should be centered all the times.

[melloware]

I think this is your issue? #5188