Lazy Load

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Lazy Load — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A deferred-content container. It renders a placeholder immediately, then
8// fetches its own contents after the page paints and swaps them in. The
9// placeholder reserves vertical space so the swap does not push the page
10// around (Cumulative Layout Shift). Pair it with <Skeleton> for slow
11// dashboard panels or per-tab content that you don't want to block first
12// paint on.
13//
14// shadcn/ui has no "lazy load" widget — it is a hypermedia loading pattern,
15// not a Radix primitive, so there is no React source of truth to mirror. We
16// build it straight from the htmx v4 lazy-load pattern and the platform docs:
17//   repos/htmx/www/src/content/patterns/01-loading/03-lazy-load.md
18//     (the canonical pattern: a placeholder div with hx-get + hx-trigger="load";
19//      htmx swaps the response in when it arrives. The "Layout shift" note
20//      says to reserve space with min-height to protect the Lighthouse/CLS
21//      score — that is exactly what `reserve`/min-height does here. The
22//      "Infinite loops" note warns against echoing hx-trigger="load" in the
23//      response: our default hx-swap="innerHTML" keeps the trigger host in
24//      place, so the response body must NOT repeat the trigger.)
25//   repos/htmx/www/src/content/reference/01-attributes/06-hx-trigger.md
26//     (verified v4: synthetic `load` fires when the element enters the DOM —
27//      "Useful for lazy-loading content"; `revealed` fires when it scrolls
28//      into the viewport; use `intersect once` instead when the element lives
29//      inside an `overflow-y: scroll` container.)
30//   repos/htmx/www/src/content/reference/01-attributes/07-hx-swap.md
31//     (verified v4: `innerHTML` — the default — replaces the *contents* of the
32//      target, leaving our reserved-space wrapper in the DOM; `outerHTML`
33//      replaces the wrapper wholesale, for when the response brings its own
34//      box. We default to innerHTML so the reserved height survives the swap.)
35//   repos/htmx/www/src/content/reference/01-attributes/01-hx-get.md
36//     (the request the container issues for its own contents.)
37//   repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-busy/index.md
38//     (verified: aria-busy="true" on a region tells AT "this content is still
39// … truncated