From 79c9337e53bcdcd9231baf29b4090c01852605f3 Mon Sep 17 00:00:00 2001 From: Charles Pan <30245070+charleslpan@users.noreply.github.com> Date: Wed, 21 Oct 2026 01:31:23 +0000 Subject: [PATCH] perf(panel): an empty toast stack measures nothing on every draw The toast stack's glide ran a layout effect after every draw, with no dependency list. It read the motion tokens through getComputedStyle and every toast's box, which lays out the whole window, even though the stack is empty nearly always. A profile of the panel at rest put it at about a fifth of the main thread's busy time. An empty stack now returns before reading anything. Co-authored-by: luke-agent[bot] <339870089+luke-agent[bot]@users.noreply.github.com> --- packages/panel/src/toast.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/panel/src/toast.tsx b/packages/panel/src/toast.tsx index b57d874438..844e4fa290 100644 --- a/packages/panel/src/toast.tsx +++ b/packages/panel/src/toast.tsx @@ -401,6 +401,11 @@ function useStackGlide(): React.RefObject { useLayoutEffect(() => { const root = list.current; if (root === null) return; + // Note that an empty stack, as it stands nearly always, reads nothing: reading the tokens or a box lays out the whole window, and the stack is drawn again with everything around it. + if (root.children.length === 0) { + if (drawn.current.size > 0) drawn.current = new Map(); + return; + } const style = getComputedStyle(root); const duration = Number.parseFloat(style.getPropertyValue("--duration-fast")) || 0; const easing = style.getPropertyValue("--spring-fast").trim();