I'm noticing a flash of an unstyled navbar on my portfolio built with with Astro. I built the navbar with react and the flash happens before the page loads complete and I don't know what is causing it but I'd appreciate your help to get it fixed. Here's is the GitHub and live site url on https://github.com/Thebuilderekes/astro-site and https://ekeopre.vercel.app and
#Flash of unstyled navbar before the page loads complete
6 messages · Page 1 of 1 (latest)
This doesn't sound like a Astro issue, that's just how pages load. The page renders the HTML then adds the css at the point it is encountered. You can specify the preload attribute to have the css load faster: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
The preload value of the element's rel attribute lets you declare fetch requests in the
HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle,
before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the pa...
Ok but how do i do it when I'm using import statement to get the CSS and not the <link> tag?
How are you linking your JS? If that's what you're importing that is
It's a react component and I'm linking my CSS using an import statement, the CSS is what I want to preload.
Any chance you figured this out @radiant oar ?