Prevent FOUC in the iframe while loading (#339)

Vite 2.9+ exhibit a flash of unstyled content in the head while the page loads in. This approach adds some styles from https://github.com/yannbf/mealdrop/blob/feat/lazy-compilation/.storybook/preview-head.html into the head, after vite has finished processing. This is necessary (instead of just putting the styles in the iframe html) due to vitejs/vite#6737. With the changes here, we no longer see content like this: ![image](https://user-images.githubusercontent.com/4616705/163624147-70c78cd9-4784-43b3-b2e6-b848fc3f6582.png)
storybookjs · Apr 15, 2022 · db26a1b · db26a1b
1 parent 17abb00
commit db26a1b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 7 deletions.
diff --git a/packages/builder-vite/input/iframe.html b/packages/builder-vite/input/iframe.html
@@ -19,13 +19,6 @@
       window.module = undefined;
     </script>
     <!-- [HEAD HTML SNIPPET HERE] -->
-    <style>
-      /*noinspection CssUnusedSymbol*/
-      #root[hidden],
-      #docs-root[hidden] {
-        display: none !important;
-      }
-    </style>
   </head>
   <body>
     <!-- [BODY HTML SNIPPET HERE] -->

diff --git a/packages/builder-vite/plugins/no-fouc.ts b/packages/builder-vite/plugins/no-fouc.ts
@@ -0,0 +1,49 @@
+import type { Plugin } from 'vite';
+
+/**
+ * This plugin is a workaround to inject some styles into the `<head>` of the iframe to
+ * prevent the "no story" text from appearing breifly while the page loads in.
+ *
+ * It can be removed, and these styles placed back into the head,
+ * when https://github.com/vitejs/vite/issues/6737 is closed.
+ */
+export function noFouc(): Plugin {
+  return {
+    name: 'no-fouc',
+    enforce: 'post',
+    async transformIndexHtml(html, ctx) {
+      if (ctx.path !== '/iframe.html') {
+        return;
+      }
+
+      return insertHeadStyles(html);
+    },
+  };
+}
+
+function insertHeadStyles(html: string) {
+  return html.replace(
+    '</head>',
+    `
+  <style>
+    /* Fix for elements flashing */
+    body > * {
+      display: none !important;
+    }
+    .sb-show-preparing-story > .sb-preparing-story,
+    .sb-show-preparing-docs > .sb-preparing-docs,
+    .sb-show-nopreview > .sb-nopreview,
+    .sb-show-errordisplay > .sb-errordisplay,
+    .sb-show-main > #root,
+    .sb-show-main > #docs-root {
+      display: block !important;
+    }
+    #root[hidden],
+    #docs-root[hidden] {
+      display: none !important;
+    }
+  </style>
+</head>
+  `.trim()
+  );
+}
diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts
@@ -7,6 +7,7 @@ import { mockCoreJs } from './mock-core-js';
 import { codeGeneratorPlugin } from './code-generator-plugin';
 import { injectExportOrderPlugin } from './inject-export-order-plugin';
 import { mdxPlugin } from './mdx-plugin';
+import { noFouc } from './plugins/no-fouc';
 import { sourceLoaderPlugin } from './source-loader-plugin';
 
 import type { UserConfig } from 'vite';
@@ -58,6 +59,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
     mockCoreJs(),
     sourceLoaderPlugin(),
     mdxPlugin(),
+    noFouc(),
     injectExportOrderPlugin,
   ] as Plugin[];
   if (framework === 'vue' || framework === 'vue3') {