From 52d5df5c4f2c9ccc38b7714fd2f4ec3f851dfb71 Mon Sep 17 00:00:00 2001 From: sounmind Date: Wed, 31 Jul 2024 18:39:11 -0400 Subject: [PATCH] fix: resolve FOUC issue on initial render of custom elements - Added display:none to body to hide text until the component is fully loaded --- components/index.js | 14 ++++++++++++++ index.html | 2 +- main.js | 19 +++++-------------- 3 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 components/index.js diff --git a/components/index.js b/components/index.js new file mode 100644 index 0000000..bfefdbe --- /dev/null +++ b/components/index.js @@ -0,0 +1,14 @@ +import "./button-link.js"; +import "./code-review-section.js"; +import "./footer-link-list.js"; +import "./footer.js"; +import "./header.js"; +import "./hero.js"; +import "./icon-link-list.js"; +import "./image.js"; +import "./intro-section.js"; +import "./language-section.js"; +import "./participant-review-section.js"; +import "./participant-review.js"; +import "./step-section.js"; +import "./step.js"; diff --git a/index.html b/index.html index cc9e744..55ba7ee 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@ - + diff --git a/main.js b/main.js index 6938419..b180ff7 100644 --- a/main.js +++ b/main.js @@ -1,14 +1,5 @@ -import "./components/button-link.js"; -import "./components/code-review-section.js"; -import "./components/footer-link-list.js"; -import "./components/footer.js"; -import "./components/header.js"; -import "./components/hero.js"; -import "./components/icon-link-list.js"; -import "./components/image.js"; -import "./components/intro-section.js"; -import "./components/language-section.js"; -import "./components/participant-review.js"; -import "./components/participant-review-section.js"; -import "./components/step.js"; -import "./components/step-section.js"; +import "./components/index.js"; + +document.addEventListener("DOMContentLoaded", () => { + document.querySelector("body").style.display = "block"; +});