Render the app after the stylesheet has loaded

In order to avoif the flash of unstyled content.
riatelab · Jul 5, 2024 · f734620 · f734620
1 parent cdecfc8
commit f734620
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -28,11 +28,29 @@ loadLocale('en');
 // to update the mode accordingly)
 initializeLightDarkMode();
 
-render(
-  () => (
-    <TypesafeI18n locale={'en'}>
-      <AppPage />
-    </TypesafeI18n>
-  ) as JSX.Element,
-  root,
-);
+const firstRender = () => {
+  render(
+    () => (
+      <TypesafeI18n locale={'en'}>
+        <AppPage />
+      </TypesafeI18n>
+    ) as JSX.Element,
+    root,
+  );
+};
+
+const s = document.querySelector('#stylesheet');
+
+if (s instanceof HTMLLinkElement) {
+  // In production, we only want to render the app after the stylesheet has loaded
+  // (to avoid the flash of unstyled content)
+  if (s.sheet) firstRender();
+  else {
+    s.addEventListener('load', () => {
+      firstRender();
+    });
+  }
+} else {
+  // In dev we can just render the app right away
+  firstRender();
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -22,7 +22,7 @@ const jsToBottomCssNoneMedia = () => ({
     // eslint-disable-next-line no-param-reassign
     html = html.replace('<!-- # INSERT SCRIPT HERE -->', scriptTag);
     // eslint-disable-next-line no-param-reassign
-    html = html.replace('rel="stylesheet"', 'rel="stylesheet" media="none" onload="if(media!=\'all\')media=\'all\'"');
+    html = html.replace('rel="stylesheet"', 'id="stylesheet" rel="stylesheet" media="none" onload="if(media!=\'all\')media=\'all\'"');
     return html;
   },
 });