Flash of Unstyled Content (FOUC) when loading course pages (e.g., Post-ITP Tracks)

Describe the bug

When loading certain course pages (e.g., Post-ITP Tracks and others), the page briefly renders unstyled HTML before the CSS/JS is applied. After a short delay, the page loads correctly with styles.

Steps to Reproduce:

1. Open curriculum.codeyourfuture.io/ 2. Navigate to the Post-ITP Tracks course (and sometimes other courses). 3. Notice that the page flashes unstyled content (plain HTML without CSS) for a split second before the proper styles are applied.

What is wrong with this content?

The issue is not with the content itself, but with how the page loads — users see a flash of unstyled content before CSS loads.

How could this be fixed?

• Ensure critical CSS is preloaded.
• Investigate React/Next.js hydration or asset loading.
• Optimize bundling so styles are applied immediately.

Link to content

curriculum.codeyourfuture.io/ → Post-ITP Tracks (and other course pages).

Additional context / Evidence

https://github.com/user-attachments/assets/fd053d23-feaa-4e4f-95ec-f35715d807ec

https://github.com/user-attachments/assets/83a36fd6-09dd-4a8b-aa6a-4d662e5bc0c8

Who else might need to know about this?

Frontend maintainers of the CodeYourFuture platform.