Skip to content

Commit

Permalink
fix: resolve FOUC issue on initial render of custom elements
Browse files Browse the repository at this point in the history
- Added display:none to body to hide text until the component is fully loaded
  • Loading branch information
sounmind committed Jul 31, 2024
1 parent a1c8ad3 commit 52d5df5
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 15 deletions.
14 changes: 14 additions & 0 deletions components/index.js
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<script src="./main.js" type="module"></script>
</head>

<body>
<body style="display: none">
<ds-header></ds-header>

<ds-intro-section id="intro-section">
Expand Down
19 changes: 5 additions & 14 deletions main.js
Original file line number Diff line number Diff line change
@@ -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";
});

0 comments on commit 52d5df5

Please sign in to comment.