prevent theme flickering

avivkeller · avivkeller · commit 7e0ac705a512 · 2025-06-07T14:13:43.000-04:00
diff --git a/src/generators/jsx-ast/index.mjs b/src/generators/jsx-ast/index.mjs
@@ -52,11 +52,21 @@ export default {
         );
 
         const sideBarProps = {
-          versions: versions.map(({ version }) => {
+          versions: versions.map(({ version, isLts, isCurrent }) => {
             const parsed = getVersionFromSemVer(version);
+            let label = `v${parsed}`;
+
+            if (isLts) {
+              label += ' (LTS)';
+            }
+
+            if (isCurrent) {
+              label += ' (Current)';
+            }
+
             return {
               value: getVersionURL(parsed, entry.api),
-              label: `v${parsed}`,
+              label,
             };
           }),
           currentVersion: `v${version.version}`,
diff --git a/src/generators/web/client/hooks/useTheme.mjs b/src/generators/web/client/hooks/useTheme.mjs
@@ -1,26 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 /**
  * This hook provides theme management functionality
  */
 export const useTheme = () => {
-  const [theme, setTheme] = useState('light');
-
-  useEffect(() => {
-    // Get initial theme from HTML or fallback to system preference
-    const htmlElement = document.documentElement;
-    const currentTheme = htmlElement.getAttribute('data-theme');
-
-    const initialTheme =
-      currentTheme ||
-      localStorage.getItem('theme') ||
-      (window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-
-    setTheme(initialTheme);
-    htmlElement.setAttribute('data-theme', initialTheme);
-  }, []);
+  const [theme, setTheme] = useState(() =>
+    CLIENT ? document.documentElement.getAttribute('data-theme') : 'light'
+  );
 
   /**
    * Toggles the theme between 'light' and 'dark'.
diff --git a/src/generators/web/template.html b/src/generators/web/template.html
@@ -3,6 +3,11 @@
 <head>
   <title>{{title}}</title>
   <link rel="stylesheet" href="styles.css" />
+  <script>
+    // This script runs before the document renders
+    document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') ||
+      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
+  </script>
 </head>
 <body>
   <div id="root">{{{dehydrated}}}</div>
diff --git a/src/releases.mjs b/src/releases.mjs
@@ -10,6 +10,9 @@ const NODE_VERSIONS_REGEX = /\* \[Node\.js ([0-9.]+)\]\S+ (.*)\r?\n/g;
 // A ReGeX for checking if a Node.js version is an LTS release
 const NODE_LTS_VERSION_REGEX = /Long Term Support/i;
 
+// A ReGeX for checking if a Node.js version is the Current release
+const NODE_CURRENT_VERSION_REGEX = /Current/i;
+
 /**
  * Retrieves the Node.js CHANGELOG.md via a Network Request,
  * used when a non-file protocol is provided
@@ -56,6 +59,7 @@ const createNodeReleases = changelogPath => {
     return nodeMajors.map(match => ({
       version: coerce(match[1]),
       isLts: NODE_LTS_VERSION_REGEX.test(match[2]),
+      isCurrent: NODE_CURRENT_VERSION_REGEX.test(match[2]),
     }));
   };
 
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -114,5 +114,6 @@ declare global {
   export interface ApiDocReleaseEntry {
     version: SemVer;
     isLts: boolean;
+    isCurrent: boolean;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -114,5 +114,6 @@ declare global {`
`114`	`114`	`export interface ApiDocReleaseEntry {`
`115`	`115`	`version: SemVer;`
`116`	`116`	`isLts: boolean;`
	`117`	`+ isCurrent: boolean;`
`117`	`118`	`}`
`118`	`119`	`}`