Abnormal layout shift and high LCP even for a basic site?

[hunghvu]

Just found out the library, great one for fast pace development with Tailwind! So I decided to try it out for a side project.

I noticed the component styles seems to be loaded late, so it creates a large layout shift. Besides, for some reasons the Largest Contentful Paint in Lighthouse mobile test seems to be broken for the library. The test produces a very unrealistic measurement (>15s LCP). I suppose this has something to do with styles or JS being loaded?

I tried out with different browsers, OS, and the result is still the same. Any idea?

Please watch the video to see what I mean.

2023-11-03.19-21-51.mp4

[melloware]

Your issue is FOUC and you can read about it here and try the workaround I have provided: primefaces/primereact#5188

[hunghvu]

Just learn about a new terminology, FOUC, thank you! It appears the issue is not resolved for me yet. In my case, my setup is Next.js + Tailwind + PrimeReact. Here is the codesandbox: https://codesandbox.io/p/sandbox/nostalgic-cloud-5lnhjp

And here is the video of what I observe.

2023-11-04.09-58-43.mp4

[melloware]

It doesn't look like you followed the Tailwind instructions? https://primereact.org/tailwind/

[hunghvu]

Do you mean for unstyled? Yes, I only use Tailwind to style to adjust the layout when necessary via pt. I do not want to fully enable unstyled component. Can it be the issue here?
I tried out unstyled mode before, but it seems the default Tailwind pt from docs is broken for some components. That is besides the current issue though.

[hunghvu]

Seems like that is the case, I bootstrapped a new sandbox for unstyled. Apparently FOUC can only be fixed when using unstyled mode: https://codesandbox.io/p/sandbox/sad-flower-gg5tmq.

Using Tailwind in addition to styled mode seems to have side effect at the moment. Thank you for pointing this out. It's not my favorite approach though because now I have to create design for the site.

[melloware]

Your issue is this one: primefaces/primereact#4987 Trying to use both PrimeReact theme AND Tailwind. Its being worked on.