Delayed CSS Module loading causing Layout Shift - Next.js 14

[najeebputhiyallam]

Summary

I'm encountering an issue on https://next.najeebdigital.xyz/ where, upon navigating to the 'About' or any other sub-page, the CSS modules load slower, resulting in a jumping effect on the layout. I'm unsure if this is a FOUC issue or not. Additionally, the CSS module code in inside pages is changing the container div's flex-direction to column, whereas on the front page, it remains as row.

Loom Video - Reduce playback speed to lowest.
https://www.loom.com/share/426fa855d4294ff6a0254c29a24ef67c

Link to github code
https://github.com/najeebputhiyallam/myportfolio2024

Additional information

No response

Example

https://next.najeebdigital.xyz/

[najeebputhiyallam]

Anyone?

[Henryyy-Hung]

I have encountered the same issue. When I click on the <Link> to navigate to /about, the CSS module is fetched via the internet and takes 186ms to load. As a result, the HTML content of /about displays first, and then renders to the desired page after 186ms, causing a jumping effect.

If you are using styled components, this post may be helpful to you.

Sadly, I am using CSS modules and have not yet found a solution.