feat(KTL-2844): Enable interactive faster than hydrated

zoobestik · zoobestik · commit f10049abcf6d · 2025-08-19T17:10:55.000+02:00
diff --git a/components/hydration-event.tsx b/components/hydration-event.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+export default function HydrationEvent() {
+    useEffect(() => {
+        document.documentElement.classList.add("hydrated");
+        window.dispatchEvent(new Event('react:hydrated'));
+    }, []);
+    return null;
+}
diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import Head from 'next/head';
 import Script from 'next/script';
+import dynamic from 'next/dynamic';
 
 import 'normalize.css';
 import './global.css';
@@ -9,10 +10,16 @@ import '@jetbrains/kotlin-web-site-ui/out/components/typography/index.css';
 import '@jetbrains/kotlin-web-site-ui/out/components/grid/index.css';
 import { Favicon } from '../components/favicon/favicon';
 
+const HydrationEvent = dynamic(() => import('../components/hydration-event'), {
+    ssr: false
+});
+
 // This default export is required in a new `pages/_app.js` file.
 export default function MyApp({ Component, pageProps }) {
     useEffect(() => {
-        document.body.className = pageProps.isDarkTheme ? 'dark-theme' : '';
+        if(pageProps.isDarkTheme) {
+            document.documentElement.classList.add('dark-theme');
+        }
     });
 
     return (
@@ -22,6 +29,9 @@ export default function MyApp({ Component, pageProps }) {
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
             </Head>
 
+            <HydrationEvent/>
+
+            <Script src={'https://cdn.optimizely.com/js/26633200186.js'} strategy={"beforeInteractive"}/>
             <Script
                 id={'google-tag-manager-inline-script'}
                 strategy="afterInteractive"
diff --git a/pages/_document.jsx b/pages/_document.jsx
@@ -1,12 +1,13 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document';
+import cn from 'classnames';
 
 export default class MyDocument extends Document {
     render() {
         const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
         return (
             <Html lang="en">
                 <Head />
-                <body className={pageProps.isDarkTheme ? 'dark-theme' : ''}>
+                <body className={cn(pageProps.isDarkTheme ? 'dark-theme' : '', 'nextjs')}>
                     <Main />
                     <NextScript />
                 </body>
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -256,8 +256,6 @@ function Index() {
                     <GlobalFooter />
                 </div>
             </ThemeProvider>
-
-            <Script src={'https://cdn.optimizely.com/js/26633200186.js'} strategy={"afterInteractive"}/>
         </Layout>
     );
 }

Original file line number	Diff line number	Diff line change
`@@ -256,8 +256,6 @@ function Index() {`
`256`	`256`	`<GlobalFooter />`
`257`	`257`	`</div>`
`258`	`258`	`</ThemeProvider>`
`259`		`-`
`260`		`- <Script src={'https://cdn.optimizely.com/js/26633200186.js'} strategy={"afterInteractive"}/>`
`261`	`259`	`</Layout>`
`262`	`260`	`);`
`263`	`261`	`}`