boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

perf(mui): smooth theme cross-fade via View Transitions API (was per-element repaint jank)

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-07 07:49:08 +02:00
parent 4d016cdab5
commit c997a22a3c
2 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/admin/base.css
View File

@@ -13,30 +13,20 @@ html {
overflow-x: hidden;
}
/* Coordinated dark/light cross-fade. ThemeContext adds `.theme-transition` to
<html> 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;
}
}

52
src/context/ThemeContext.tsx
View File

@@ -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<ThemeContextValue | null>(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 (