chore: prevent fouc on dev pages (#3395)

web-dev-server.config.js

@@ -1,24 +1,50 @@
 /* eslint-env node */
 const fs = require('fs');
 
-const indexFile = fs.readFileSync('./dev/index.html', 'utf8');
+const preventFouc = `
+  <style>
+    body:not(.resolved) {
+      opacity: 0;
+    }
+
+    body {
+      transition: opacity 0.2s;
+    }
+  </style>
+
+  <script type="module">
+    // It's important to use type module for the script so the timing is correct
+    document.body.classList.add('resolved');
+  </script>
+`;
 
 module.exports = {
   plugins: [
     {
       name: 'dev-page-listing',
       transform(context) {
-        if (['/dev/index.html', '/dev', '/dev/'].includes(context.path)) {
-          const listing = `
-            <ul id="listing">
-              ${fs
-                .readdirSync('./dev')
-                .filter((file) => file !== 'index.html')
-                .map((file) => `<li><a href="/dev/${file}">${file}</a></li>`)
-                .join('')}
-            </ul>`;
-
-          return { body: indexFile.replace(/<ul id="listing">.*<\/ul>/, listing) };
+        if (context.response.is('html')) {
+          let body = context.body;
+
+          // Fouc prevention
+          body = body.replace(/<\/body>/, `${preventFouc}\n</body>`);
+
+          // Index page listing
+          if (['/dev/index.html', '/dev', '/dev/'].includes(context.path)) {
+            const listing = `
+              <ul id="listing">
+                ${fs
+                  .readdirSync('./dev')
+                  .filter((file) => file !== 'index.html')
+                  .filter((file) => file.endsWith('.html'))
+                  .map((file) => `<li><a href="/dev/${file}">${file}</a></li>`)
+                  .join('')}
+              </ul>`;
+
+            body = body.replace(/<ul id="listing">.*<\/ul>/, listing);
+          }
+
+          return { body };
         }
       }
     }