fix: better FOUC prevention

2024-01-07 16:42:54 -06:00 · 2024-01-07 16:42:54 -06:00 · 6b9738cb67
commit 6b9738cb67
parent 55985e40e0
2 changed files with 3 additions and 4 deletions
--- a/packages/react/src/ssr.js
+++ b/packages/react/src/ssr.js
@ -34,10 +34,7 @@ class Ssr extends Transform {
      this.push(
        string.replace(
          '<div id="root"></div>',
-          `<div id="root"${
-            // What FOUC? ;)
-            'production' !== NODE_ENV ? ' style="display: none"' : ''
-          }>${output}</div>`,
+          `<div id="root">${output}</div>`,
        ),
      );
    }
--- a/packages/web/src/server/build/template.ejs
+++ b/packages/web/src/server/build/template.ejs
@ -12,6 +12,8 @@
  </head>
  <body>
    <div id="<%= htmlWebpackPlugin.options.appMountId %>"></div>
+    <!-- Prevent FOUC. -->
+    <script>window.document.querySelector('#root').style.display = 'none'</script>
    <script src="/flecks.config.js"></script>
    <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>