From 3c92aa49a4580ab77ad0ddfbc839ef578c658628 Mon Sep 17 00:00:00 2001
From: taranvohra <taranvohra@outlook.com>
Date: Thu, 29 Oct 2026 22:04:20 +0530
Subject: [PATCH] Load webframes lazily

A page can hold hundreds of webframes, most of them inside collapsed
expandables. The source is attached on mount, so every one of them starts
a cross-origin navigation as soon as the page hydrates: a reference page
with 521 webframes fired 521 requests, the last finishing ~20s in.

Mark the iframe `loading="lazy"` so each one waits until it is near the
viewport. An iframe inside a collapsed `<details>` then loads nothing, and
loads on open.
---
 packages/react-contentkit/src/ElementWebframe.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-contentkit/src/ElementWebframe.tsx b/packages/react-contentkit/src/ElementWebframe.tsx
index 229fe93bf..3412d2705 100644
--- a/packages/react-contentkit/src/ElementWebframe.tsx
+++ b/packages/react-contentkit/src/ElementWebframe.tsx
@@ -196,6 +196,10 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                 // Rendered without a source before mount so it reserves its size in the SSR layout.
                 src={mounted ? element.source.url : undefined}
                 title={element.source.url}
+                // A page can hold hundreds of these, most of them inside collapsed expandables.
+                // Loading them all on mount delays the first paint by seconds, so each one waits
+                // until it is near the viewport.
+                loading="lazy"
                 allowFullScreen
                 allow="clipboard-write"
                 className="contentkit-webframe block h-full w-full max-w-full border-none"