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; overflow-x: hidden;
} }
/* Coordinated dark/light cross-fade. ThemeContext adds `.theme-transition` to /* Premium dark/light cross-fade via the View Transitions API (driven by
<html> for ~300ms during a toggle (only on real switches, not initial load), ThemeContext.toggleTheme). The browser cross-fades a GPU-composited snapshot
so the whole UI fades its theme-driven colors together. Normal interactions of the whole page — smooth at any element count — instead of repainting every
keep their own transitions, because this rule applies only while the class node's colors (which stutters). Tune only the root cross-fade timing here. */
is present. */ ::view-transition-old(root),
html.theme-transition, ::view-transition-new(root) {
html.theme-transition *, animation-duration: 0.3s;
html.theme-transition *::before, animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
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;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html.theme-transition, ::view-transition-old(root),
html.theme-transition *, ::view-transition-new(root) {
html.theme-transition *::before, animation: none;
html.theme-transition *::after {
transition: none !important;
} }
} }

50
src/context/ThemeContext.tsx
View File

@@ -2,10 +2,10 @@ import {
createContext, createContext,
useContext, useContext,
useState, useState,
useEffect, useLayoutEffect,
useRef,
type ReactNode, type ReactNode,
} from "react"; } from "react";
import { flushSync } from "react-dom";
interface ThemeContextValue { interface ThemeContextValue {
theme: string; theme: string;
@@ -14,6 +14,10 @@ interface ThemeContextValue {
const ThemeContext = createContext<ThemeContextValue | null>(null); const ThemeContext = createContext<ThemeContextValue | null>(null);
type ViewTransitionDocument = Document & {
startViewTransition?: (callback: () => void) => unknown;
};
export function ThemeProvider({ children }: { children: ReactNode }) { export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState(() => { const [theme, setTheme] = useState(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
@@ -21,37 +25,37 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
} }
return "dark"; return "dark";
}); });
const firstRun = useRef(true);
useEffect(() => { // Apply synchronously (layout effect) so the `data-theme` attribute flips
const root = document.documentElement; // inside the View Transition's flushSync below — letting the browser capture
// Coordinated cross-fade on real toggles only (not the initial mount): // the "after" snapshot and cross-fade to it.
// arm a uniform color transition across the whole tree for the switch useLayoutEffect(() => {
// window, then remove it so normal interactions keep their own transitions. document.documentElement.setAttribute("data-theme", theme);
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);
localStorage.setItem("boha-theme", theme); localStorage.setItem("boha-theme", theme);
const themeColor = theme === "dark" ? "#12121a" : "#ffffff"; const themeColor = theme === "dark" ? "#12121a" : "#ffffff";
document document
.querySelector('meta[name="theme-color"]') .querySelector('meta[name="theme-color"]')
?.setAttribute("content", themeColor); ?.setAttribute("content", themeColor);
return () => {
if (timer) clearTimeout(timer);
};
}, [theme]); }, [theme]);
const toggleTheme = () => { const toggleTheme = () => {
const apply = () =>
setTheme((prev) => (prev === "dark" ? "light" : "dark")); 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 ( return (