You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
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.
The text was updated successfully, but these errors were encountered:
melloware
added
Resolution: Duplicate
Issue has already been reported or a pull request related to same issue has already been submitted
and removed
Status: Needs Triage
Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
labels
Dec 17, 2023
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.
The text was updated successfully, but these errors were encountered: