brittle geode
I have a weird issue. When my final uploaded SSG page loads, somehow it just loads the raw HTML first and after approx. 160ms the CSS kicks in. That causes a flashing/flickering. Shouldn't the CSS be integrated into the pages <head> section? I am using TailwindCSS and PostCSS. Might these have to do something with it? Is this behaviour normal?
Kind regards.
sage temple
Do you have a repo and/or site link to look at? That's not normal behaviour, have a look here for setup instructions https://docs.astro.build/en/guides/integrations-guide/tailwind/
hidden orbit
Looks like normal behaviour to me when slowed down? The browser gets the HTML, then reads the head, gets any linked stylesheets then loads them. So there will always be a delay.
The question is however that 160ms feels like a long time and you definitely shouldn't be getting a flash unless your css file is massive.
But since you're using tailwind it should be fine? What's your HEAD in your shopped html?
brittle geode
I think I got it. I fetched some data from a CMS in the frontmatter section of the Layout component. This resulted in having no <head> tag at all. Even though I defined a <head> tag in the layout component. I removed the fetching and did it somewhere else. Now the head tag also points to the css file that I imported.
But strange that it then completely removes the <head> tag and all css imports … just because of a fetch.
Thank you both for your help!
hidden orbit
That definitely shouldn't happen... Yeah we'd need to dig way more into that call and what was happening to figure out what's going on there.
My immediate first thought is either the fetch or the data or something is causing an unclosed html tag somewhere and the head code is getting treated as text somewhere...
But it could be any number of things... Probably
sage temple
Great you got it solved. Yeah that sounds strange
By normal behaviour, I was referring to the raw HTML/markup showing first
honest hawk
I am having this problem too, here: https://beta.spg.dev/
I have one component where I fetch data from a CMS... but that happens in the build step of my app.