Revert useAIChatWidthStore change

Revert PreservePageLayout change
changeset
2026-09-25 11:52:10 +00:00 · 2026-09-02 11:48:24 +02:00 · 2026-09-02 11:46:01 +02:00 · 2026-09-02 11:44:35 +02:00 · 2026-09-02 11:44:35 +02:00
3 changed files with 22 additions and 5 deletions
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Skip redundant class and style writes on `<html>` and the site header during initial load; each one re-styled the whole document.
@@ -8,6 +8,12 @@ import { useEffect } from 'react';
 export function TableOfContentsScript() {
    useEffect(() => {
        const root = document.documentElement;
+        // Writing the <html> style attribute re-styles the whole document, so skip unchanged values.
+        const setVar = (name: string, value: string) => {
+            if (root.style.getPropertyValue(name) !== value) {
+                root.style.setProperty(name, value);
+            }
+        };

        // Calculate and set TOC dimensions
        const updateTocLayout = () => {
@@ -42,8 +48,8 @@ export function TableOfContentsScript() {
            }

            // Update height
-            root.style.setProperty('--toc-height', `${Math.max(height, 0)}px`);
-            root.style.setProperty('--toc-top-offset', `${Math.max(offset, 0)}px`);
+            setVar('--toc-height', `${Math.max(height, 0)}px`);
+            setVar('--toc-top-offset', `${Math.max(offset, 0)}px`);

            // Subtract visible pageCover (if any)
            if (
@@ -64,8 +70,8 @@ export function TableOfContentsScript() {
                }
            }

-            root.style.setProperty('--outline-height', `${Math.max(height, 0)}px`);
-            root.style.setProperty('--outline-top-offset', `${Math.max(offset, 0)}px`);
+            setVar('--outline-height', `${Math.max(height, 0)}px`);
+            setVar('--outline-top-offset', `${Math.max(offset, 0)}px`);
        };

        // Initial update
@@ -1,6 +1,6 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useEffect, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';

 import { useIsNavigating } from '../hooks';
 import { tcls } from '@/lib/tailwind';
@@ -15,8 +15,14 @@ export const NavigationLoader = () => {
    }, []);

    // On route changes, add a transient class for the first paint of the new page.
+    // Skipped on the initial mount: toggling a class on <html> re-styles the whole document.
+    const isInitialMount = useRef(true);
    useLayoutEffect(() => {
        void pathname;
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
        const root = document.documentElement;
        root.classList.add('route-change');
        let raf2 = 0;
Author	SHA1	Message	Date
Peter White	49bbe04213	Revert useAIChatWidthStore change	2026-09-02 11:48:24 +02:00
Peter White	872321f44d	Revert PreservePageLayout change	2026-09-02 11:46:01 +02:00
Peter White	4519ea183d	changeset	2026-09-02 11:44:35 +02:00
Peter White	db9fbab15e	Skip redundant root mutations during initial load	2026-09-02 11:44:35 +02:00