From c997a22a3c4378f7aee9a10877b7ffaf99791ebd Mon Sep 17 00:00:00 2001 From: BOHA Date: Sun, 7 Jun 2026 07:49:08 +0200 Subject: [PATCH] perf(mui): smooth theme cross-fade via View Transitions API (was per-element repaint jank) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The per-element color/box-shadow transition repainted the whole tree every frame (~5fps). Replaced with document.startViewTransition: the browser cross-fades one GPU-composited snapshot of the page — smooth regardless of element count. flushSync + useLayoutEffect ensure the data-theme flip is captured in the transition; instant fallback where unsupported / reduced-motion. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/admin/base.css | 32 ++++++++-------------- src/context/ThemeContext.tsx | 52 +++++++++++++++++++----------------- 2 files changed, 39 insertions(+), 45 deletions(-) diff --git a/src/admin/base.css b/src/admin/base.css index db4bb5b..f8d37ab 100644 --- a/src/admin/base.css +++ b/src/admin/base.css @@ -13,30 +13,20 @@ html { overflow-x: hidden; } -/* Coordinated dark/light cross-fade. ThemeContext adds `.theme-transition` to - for ~300ms during a toggle (only on real switches, not initial load), - so the whole UI fades its theme-driven colors together. Normal interactions - keep their own transitions, because this rule applies only while the class - is present. */ -html.theme-transition, -html.theme-transition *, -html.theme-transition *::before, -html.theme-transition *::after { - transition: - background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), - stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +/* Premium dark/light cross-fade via the View Transitions API (driven by + ThemeContext.toggleTheme). The browser cross-fades a GPU-composited snapshot + of the whole page — smooth at any element count — instead of repainting every + node's colors (which stutters). Tune only the root cross-fade timing here. */ +::view-transition-old(root), +::view-transition-new(root) { + animation-duration: 0.3s; + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { - html.theme-transition, - html.theme-transition *, - html.theme-transition *::before, - html.theme-transition *::after { - transition: none !important; + ::view-transition-old(root), + ::view-transition-new(root) { + animation: none; } } diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx index 4a6d4a9..b0872a3 100644 --- a/src/context/ThemeContext.tsx +++ b/src/context/ThemeContext.tsx @@ -2,10 +2,10 @@ import { createContext, useContext, useState, - useEffect, - useRef, + useLayoutEffect, type ReactNode, } from "react"; +import { flushSync } from "react-dom"; interface ThemeContextValue { theme: string; @@ -14,6 +14,10 @@ interface ThemeContextValue { const ThemeContext = createContext(null); +type ViewTransitionDocument = Document & { + startViewTransition?: (callback: () => void) => unknown; +}; + export function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setTheme] = useState(() => { if (typeof window !== "undefined") { @@ -21,37 +25,37 @@ export function ThemeProvider({ children }: { children: ReactNode }) { } return "dark"; }); - const firstRun = useRef(true); - useEffect(() => { - const root = document.documentElement; - // Coordinated cross-fade on real toggles only (not the initial mount): - // arm a uniform color transition across the whole tree for the switch - // window, then remove it so normal interactions keep their own transitions. - let timer: number | undefined; - if (!firstRun.current) { - root.classList.add("theme-transition"); - timer = window.setTimeout( - () => root.classList.remove("theme-transition"), - 320, - ); - } - firstRun.current = false; - - root.setAttribute("data-theme", theme); + // Apply synchronously (layout effect) so the `data-theme` attribute flips + // inside the View Transition's flushSync below — letting the browser capture + // the "after" snapshot and cross-fade to it. + useLayoutEffect(() => { + document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("boha-theme", theme); const themeColor = theme === "dark" ? "#12121a" : "#ffffff"; document .querySelector('meta[name="theme-color"]') ?.setAttribute("content", themeColor); - - return () => { - if (timer) clearTimeout(timer); - }; }, [theme]); const toggleTheme = () => { - setTheme((prev) => (prev === "dark" ? "light" : "dark")); + const apply = () => + setTheme((prev) => (prev === "dark" ? "light" : "dark")); + + const doc = document as ViewTransitionDocument; + const reduceMotion = + typeof window !== "undefined" && + !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches; + + // View Transitions API: the browser cross-fades a GPU-composited snapshot of + // the whole page — smooth at any element count — instead of repainting every + // node's colors (which stutters). Falls back to an instant switch where the + // API is unavailable or the user prefers reduced motion. + if (doc.startViewTransition && !reduceMotion) { + doc.startViewTransition(() => flushSync(apply)); + } else { + apply(); + } }; return (