I am hosting the following astro project on netlify, and every time i refresh a page i get a flash of unstyled content. any help would be appreciated.
Im handling styles using tailwindCss and the main layout for the page is:
---
import Navbar from "../components/Navbar.svelte";
import Footer from "../components/Footer.astro";
---
<style is:global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>JMJM</title>
<script is:inline>
let domReady = (cb) => {
document.readyState === 'interactive' || document.readyState === 'complete'
? cb()
: document.addEventListener('DOMContentLoaded', cb);
};
domReady(() => {
// Display body when DOM is loaded
document.body.style.visibility = 'visible';
});
const html = document.querySelector("html");
const theme = (() => {
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
}
return "light";
})();
if (theme === "light") {
html.classList.remove("dark");
} else {
html.classList.add("dark");
}
window.localStorage.setItem("theme", theme);
</script>
</head>
<body style="hidden" class="bg-snow2 text-night0 dark:bg-night0 dark:text-snow2">
<script>0</script>
<Navbar client:load />
<div class="max-w-[1080px] mx-auto">
<slot />
</div>
<Footer />
<noscript><style>body { visibility: visible; }</style></noscript>
</body>
</html>
Full Source: https://github.com/jmjaimesmendoza/portfolio
