How to prevent FOUC when HTML is loaded before the styles?

hotwired / turbo

The speed of a single-page web application without having to write any JavaScript

https://turbo.hotwired.dev

MIT License

6.72k stars 428 forks source link

How to prevent FOUC when HTML is loaded before the styles? #1131

Open evgenyneu opened 9 months ago

evgenyneu commented 9 months ago

I have a link that points to another page:

<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>
  Hello World
</body>

This page shows HTML before the styles from style.css are loaded, so the users see the unstyled content briefly. Is there a way to tell Turbo to only show HTML after the styles are loaded (which is the normal behaviour without Turbo)?

markjerz commented 9 months ago

See also #377 which is about scripts not being loaded before the html is rendered.

lkraav commented 9 months ago

For reference, a strategy from Polymer days https://cdnjs.cloudflare.com/ajax/libs/polymer/3.4.1/lib/utils/unresolved.js