From c22d54abb0b54356b26874c91ba8e43dde87a2c4 Mon Sep 17 00:00:00 2001
From: Kismet Hasanaj <kismet.hasanaj@elite.net.uk>
Date: Sun, 3 May 2026 01:09:44 +0200
Subject: [PATCH] .

---
 app/globals.css             |  7 -------
 app/layout.tsx              | 27 +--------------------------
 app/page.tsx                | 27 +++++++--------------------
 components/CookieBanner.tsx | 23 ++++++-----------------
 4 files changed, 14 insertions(+), 70 deletions(-)
diff --git a/app/globals.css b/app/globals.css
index e55a75d8..cf77b524 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -111,9 +111,6 @@
 @layer base {
   html {
     background: var(--bg);
-  }
-
-  html {
     scroll-behavior: smooth;
   }
 
@@ -139,10 +136,6 @@
   }
 }
 
-html[data-ui-ready="0"] body {
-  opacity: 0;
-}
-
 /* ---------------------------------------------------------------------------
    4. Site shell + ambient effects
    The .site-shell class is on the <main> element in page.tsx. The two
diff --git a/app/layout.tsx b/app/layout.tsx
index 64e6e342..a15c36c3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -62,32 +62,7 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en-GB" suppressHydrationWarning data-ui-ready="0">
-      <head>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function () {
-                var root = document.documentElement;
-                root.dataset.uiReady = "0";
-                try {
-                  var consent = window.localStorage.getItem("novarix-cookie-consent");
-                  var introSeen = window.sessionStorage.getItem("novarix-intro-seen");
-                  var shouldShowBanner = consent !== "ack" && consent !== "rst";
-                  var shouldPlayIntro = !shouldShowBanner && !introSeen;
-
-                  root.dataset.showCookieBanner = shouldShowBanner ? "1" : "0";
-                  root.dataset.showIntro = shouldPlayIntro ? "1" : "0";
-                } catch (error) {
-                  root.dataset.showCookieBanner = "1";
-                  root.dataset.showIntro = "0";
-                }
-                root.dataset.uiReady = "1";
-              })();
-            `,
-          }}
-        />
-      </head>
+    <html lang="en-GB" suppressHydrationWarning>
       <body>
         {children}
         <CookieBanner />
diff --git a/app/page.tsx b/app/page.tsx
index 6b582793..1d947041 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -25,7 +25,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { site } from "@/content";
 import { openCookieBanner } from "@/components/CookieBanner";
 
@@ -42,23 +42,18 @@ export default function HomePage() {
   //  pointer    — the mouse position (in % of page width/height). Used by the
   //               soft glow that follows the cursor in the background.
   // ---------------------------------------------------------------------------
-  const [showIntro, setShowIntro] = useState(() => {
-    if (typeof document === "undefined") return false;
-    return document.documentElement.dataset.showIntro === "1";
-  });
+  const [showIntro, setShowIntro] = useState(false);
   const [pointer, setPointer] = useState<PointerState>({ x: 50, y: 22 });
 
   // ---------------------------------------------------------------------------
   //  INTRO OVERLAY EFFECT
   //  Plays the animated logo + wordmark the first time someone visits the
-  //  site in this browser tab. We decide before hydration whether to play it,
-  //  which avoids the homepage flashing briefly before the intro appears.
-  //  After the user accepts cookies on their first visit, we trigger the intro
-  //  immediately from the banner close action.
+  //  site in this browser tab. The initial check runs in useLayoutEffect so
+  //  the intro can mount before the first browser paint, avoiding a visible
+  //  flash of the homepage underneath.
   // ---------------------------------------------------------------------------
-  useEffect(() => {
+  useLayoutEffect(() => {
     function playIntro() {
-      document.documentElement.dataset.showIntro = "1";
       setShowIntro(true);
       try {
         window.sessionStorage.setItem(INTRO_SEEN_KEY, "true");
@@ -67,7 +62,6 @@ export default function HomePage() {
       }
 
       const timer = window.setTimeout(() => {
-        document.documentElement.dataset.showIntro = "0";
         setShowIntro(false);
       }, 3950);
 
@@ -79,21 +73,14 @@ export default function HomePage() {
     try {
       const introSeen = window.sessionStorage.getItem(INTRO_SEEN_KEY);
       const consent = window.localStorage.getItem("novarix-cookie-consent");
-      const shouldPlayNow =
-        document.documentElement.dataset.showIntro === "1" &&
-        consent === "ack" &&
-        !introSeen;
+      const shouldPlayNow = consent === "ack" && !introSeen;
 
       if (shouldPlayNow) {
         timer = playIntro();
       } else {
-        document.documentElement.dataset.showIntro = "0";
-        // eslint-disable-next-line react-hooks/set-state-in-effect
         setShowIntro(false);
       }
     } catch {
-      document.documentElement.dataset.showIntro = "0";
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setShowIntro(false);
     }
 
diff --git a/components/CookieBanner.tsx b/components/CookieBanner.tsx
index 095d2c76..75fb16ad 100644
--- a/components/CookieBanner.tsx
+++ b/components/CookieBanner.tsx
@@ -22,7 +22,7 @@
 // =============================================================================
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { site } from "@/content";
 
 const CONSENT_KEY = "novarix-cookie-consent";
@@ -33,30 +33,20 @@ const INTRO_EVENT = "novarix:start-intro";
 type Consent = "unknown" | "ack" | "rst";
 
 export default function CookieBanner() {
-  // Start from the pre-hydration decision made in layout.tsx so the banner
-  // can appear immediately on first visit without waiting for a delayed effect.
-  const [visible, setVisible] = useState(() => {
-    if (typeof document === "undefined") return false;
-    return document.documentElement.dataset.showCookieBanner === "1";
-  });
+  // Hidden by default on the server, then synchronously shown on first paint
+  // if no consent choice exists yet.
+  const [visible, setVisible] = useState(false);
 
   // Read the stored consent on mount and decide whether to show the banner.
-  useEffect(() => {
+  useLayoutEffect(() => {
     try {
       const stored = window.localStorage.getItem(CONSENT_KEY) as Consent | null;
       if (stored !== "ack" && stored !== "rst") {
-        document.documentElement.dataset.showCookieBanner = "1";
-        // eslint-disable-next-line react-hooks/set-state-in-effect
         setVisible(true);
-      } else {
-        document.documentElement.dataset.showCookieBanner = "0";
       }
     } catch {
       // localStorage unavailable (private mode, blocked, etc.) — show the
-      // banner so the user is still told. Sync-once-on-mount is a legitimate
-      // use of setState in an effect.
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      document.documentElement.dataset.showCookieBanner = "1";
+      // banner so the user is still told.
       setVisible(true);
     }
   }, []);
@@ -80,7 +70,6 @@ export default function CookieBanner() {
     } catch {
       /* storage unavailable — nothing to do */
     }
-    document.documentElement.dataset.showCookieBanner = "0";
     setVisible(false);
   }
 
