From d5e136052d5f81837e90b8bfda74aafd80592b5c Mon Sep 17 00:00:00 2001
From: WEIREN FENG <feng.weir@northeastern.edu>
Date: Fri, 9 Oct 2026 07:20:10 -0700
Subject: [PATCH] Move the pre-paint scripts out of <head> so cold loads stop
 failing to hydrate

On a cold cache, React still gave up hydrating the root now and then
(minified error #418): 2 of 120 cold loads on production. #36 made the
consequence harmless by restoring the settings from storage, but left the
trigger: the two hand-written pre-paint scripts in <head>, which React
matches node by node while the webpack runtime removes the chunk <script>
tags it has finished loading from the same <head>.

The scripts now sit at the top of <body>, as in AlgoAlgo, where the same
move took cold-load failures from 5 of 120 to 0 of 240 on production. They
still run before the first paint, because they are the first thing the
parser meets in <body>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/layout.tsx         | 11 ++++++++---
 app/theme-provider.tsx |  5 +++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index c41b41b..7679225 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -67,11 +67,16 @@ export default function RootLayout({
       suppressHydrationWarning
       className={`${syne.variable} ${grotesk.variable} ${jetbrains.variable}`}
     >
-      <head>
+      <body>
+        {/* These run before the first paint. They sit at the top of <body>,
+            not in <head>: while React was still hydrating hand-written nodes in
+            <head>, the webpack runtime could remove the chunk <script> tags it
+            had finished loading from there, and on a cold load hydration then
+            failed now and then (React error #418) and the whole root was
+            rendered again on the client. Moving these two scripts out of
+            <head> removed that failure in AlgoAlgo, whose shell is the same. */}
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
         <script dangerouslySetInnerHTML={{ __html: langScript }} />
-      </head>
-      <body>
         <LangProvider>
           <ThemeProvider>
             <ShellProvider>
diff --git a/app/theme-provider.tsx b/app/theme-provider.tsx
index 08db934..792d5e5 100644
--- a/app/theme-provider.tsx
+++ b/app/theme-provider.tsx
@@ -2,8 +2,9 @@
 
 // App-level client providers.
 //  - ThemeProvider: mirrors data-theme ("dark" | "light") onto <html> and
-//    persists it in localStorage. The inline script in <head> (themeScript)
-//    sets it before the first paint, so the wrong theme never flashes.
+//    persists it in localStorage. The inline script at the top of <body>
+//    (themeScript) sets it before the first paint, so the wrong theme never
+//    flashes.
 //    The providers read their settings back from localStorage, not from the
 //    <html> attributes: if React gives up hydrating the root, it renders it
 //    again on the client and drops the attributes the inline script wrote,