fix: better FOUC prevention

This commit is contained in:
cha0s 2024-01-07 16:42:54 -06:00
parent 55985e40e0
commit 6b9738cb67
2 changed files with 3 additions and 4 deletions

View File

@ -34,10 +34,7 @@ class Ssr extends Transform {
this.push( this.push(
string.replace( string.replace(
'<div id="root"></div>', '<div id="root"></div>',
`<div id="root"${ `<div id="root">${output}</div>`,
// What FOUC? ;)
'production' !== NODE_ENV ? ' style="display: none"' : ''
}>${output}</div>`,
), ),
); );
} }

View File

@ -12,6 +12,8 @@
</head> </head>
<body> <body>
<div id="<%= htmlWebpackPlugin.options.appMountId %>"></div> <div id="<%= htmlWebpackPlugin.options.appMountId %>"></div>
<!-- Prevent FOUC. -->
<script>window.document.querySelector('#root').style.display = 'none'</script>
<script src="/flecks.config.js"></script> <script src="/flecks.config.js"></script>
<%= htmlWebpackPlugin.tags.bodyTags %> <%= htmlWebpackPlugin.tags.bodyTags %>
</body> </body>