perf(iframe): lazy-load the iframe widget

Also from PR #6582. An iframe is an entire browsing context, so one scrolled off
a tall board is the single most expensive thing a widget can load eagerly - and
this one had no loading attribute at all.

Records what else was mined from that PR and declined, notably its dynamic()
for BoardItemMenu: that component already early-returns null outside edit mode,
so there is no per-item overlay cost, and dynamic() fetches its chunk when the
component renders rather than when it returns something - so the chunk would
still load on every board render. It only pays off with the isEditMode guard
hoisted to the call site, which is a board-rendering change worth measuring
first rather than adopting on faith.
This commit is contained in:
Thomas Camlong committed 2026-08-14 11:04:08 +02:00
1 parent 40374803d4
commit 839b4721fb
2 files changed
+17

No files matched your search

+14
View File
@@ -55,6 +55,20 @@ panel discards nothing.
This also corrects three verdicts in the table below: `coolify` was recorded as "clean (bounded)" and
`firewall` and `health-monitoring` as triaged/fixed on other grounds. All three were carrying this cost.
### What else #6582 had, and what was declined
Mining the rest of that PR's perf-shaped hunks:
| their change | taken? |
| --- | --- |
| `keepMounted={false}` on 2 accordions | **taken, and extended to 4 sites** — above |
| `loading="lazy"` on the `iframe` widget | **taken** — an iframe is a whole browsing context, so one scrolled off a tall board is the most expensive thing a widget can load eagerly |
| `loading="lazy"` on media-releases and rssFeed | already done here |
| `dynamic()` for `BoardItemMenu` | **declined, and it does not work as written.** `BoardItemMenu` already early-returns `null` outside edit mode, so there is no overlay-per-item cost to begin with — but it is *rendered* unconditionally, and `dynamic()` fetches its chunk when the component renders, not when it returns something. So the chunk still loads on every board render. It would only pay off with the `isEditMode` guard hoisted to the call site, which is a board-rendering change worth measuring first |
| `loading="lazy"` on the immich carousel | declined — the carousel's image *is* the visible content, so there is nothing off-screen to defer |
| `memo()` on `item-content` / `grid-editor` | not extractable — entangled with that PR's new advanced-focus feature, portals and viewport hooks, not a standalone perf change |
| 5 `<Suspense>` boundaries | mostly in that PR's new components; not applicable here |
## The systemic finding this pass: inactive tab panels render in full
**Mantine's `Tabs` keeps inactive panels mounted by default.** In Mantine 9 on React 19 that is
@@ -26,6 +26,9 @@ export default function IFrameWidget({ options, isEditMode }: WidgetComponentPro
style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
className={classes.iframe}
src={embedUrl}
// An iframe is a whole browsing context, so one scrolled off a tall board is by far the most
// expensive thing a widget can load eagerly.
loading="lazy"
title="widget iframe"
allow={allowedPermissions}
scrolling={allowScrolling ? "yes" : "no"}