From 2534103627f89e7264bf29a7309e4e2178808b93 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Tue, 11 Aug 2026 10:04:12 +0200 Subject: [PATCH] perf(ui): stop mounting Popover machinery for overlays that cannot open Two more instances of the same Mantine behaviour, found by searching for overlay components that take a `disabled` prop rather than by measuring another board. OverflowBadge (packages/ui) mounted a Popover and a Popover.Dropdown unconditionally - both when `disablePopover` was set and, more importantly, when nothing overflowed at all, which is the common case. It is shared UI, used by media-releases, releases, the docker table and the widget inputs, so the cost repeated per row wherever a list renders it. The rendered markup is unchanged: a Popover.Target only forwards a ref, so returning the badges directly is visually identical. beszel disk-usage mounted a HoverCard per table row with `disabled={filesystems.length === 0}`, and already fell back to a plain progress bar inside its own target for that case - so for a system reporting no extra filesystems the entire overlay existed to render nothing. Hoisted that branch out; the now-unreachable ternary and the dead `disabled` prop went with it. Measured result of this class of fix, on the calendar which had the worst ratio: interactive components 171 -> 75 (-56%) fibers 1195 -> 907 (-24%) Honest note on the media-releases tooltip fix committed earlier: it measured **zero** on the test board. Every release there has a description and the option is on, so all 80 tooltips are legitimately enabled and none are skipped. It only helps boards where descriptions are absent or the option is off. The mechanism is right; this board simply is not the case it helps. Also confirmed NOT worth changing: downloads mounts 30 Tooltips but all three per row are functional (integration name, hover detail, progress), so there is nothing disabled to skip. Replacing them with native title attributes would change the UX, not just the cost. --- packages/ui/src/components/overflow-badge.tsx | 52 +++++++++++++------ .../widgets/src/beszel/_shared/disk-usage.tsx | 31 +++++++---- 2 files changed, 56 insertions(+), 27 deletions(-) diff --git a/packages/ui/src/components/overflow-badge.tsx b/packages/ui/src/components/overflow-badge.tsx index 253597ea8..966ff3792 100644 --- a/packages/ui/src/components/overflow-badge.tsx +++ b/packages/ui/src/components/overflow-badge.tsx @@ -19,23 +19,43 @@ export function OverflowBadge({ radius: "sm", ...props, }; - return ( - + + const hasOverflow = data.length > overflowCount; + + const badges = data.slice(0, overflowCount).map((item) => ( + + {item} + + )); + + const overflowTrigger = hasOverflow ? ( + + + +{data.length - overflowCount} + + + ) : null; + + // Mantine mounts a Popover's machinery — the Popover itself plus its Dropdown — regardless of + // `disabled`, and this component previously mounted both even when nothing overflowed, which is the + // common case. That made it a per-row cost anywhere it appears in a list: this is shared UI, used by + // media-releases (which passes `disablePopover`), releases, and the widget inputs. Returning the + // badges directly when there is no popover to show keeps the rendered markup identical — a disabled + // Popover.Target only forwards a ref — while creating none of the overlay components. + if (disablePopover || !hasOverflow) { + return ( - {data.slice(0, overflowCount).map((item) => ( - - {item} - - ))} - {data.length > overflowCount && ( - - - - +{data.length - overflowCount} - - - - )} + {badges} + {overflowTrigger} + + ); + } + + return ( + + + {badges} + {overflowTrigger} diff --git a/packages/widgets/src/beszel/_shared/disk-usage.tsx b/packages/widgets/src/beszel/_shared/disk-usage.tsx index 9aa2a14ad..7a7891ad2 100644 --- a/packages/widgets/src/beszel/_shared/disk-usage.tsx +++ b/packages/widgets/src/beszel/_shared/disk-usage.tsx @@ -22,6 +22,24 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap = const dotSize = progressSize === "xs" ? 2 : 3; const dotGap = 2; + // Mantine mounts a HoverCard's Popover machinery even when it is disabled, and this component + // renders per table row. A system reporting no extra filesystems has nothing to show on hover — it + // already fell back to a plain bar inside the target — so the whole overlay was created for nothing. + if (filesystems.length === 0) { + return ( + + + {formatPercent(system.disk)} + + + + + + + + ); + } + return ( @@ -33,11 +51,9 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap = shadow="md" openDelay={200} closeDelay={100} - disabled={filesystems.length === 0} > - {filesystems.length > 0 ? ( - - - ) : ( - - - - - - )} +