HTMX Lazy Loading & OOB Swaps

1. Deep Architecture

Lazy loading speeds up initial page loads by rendering lightweight placeholders first, fetching heavy sections asynchronously. Out-of-Band (OOB) swaps allow a returning HTML fragment to update multiple parts of a page in a single request by matching element IDs.

2. The Feynman Gatekeeper

[KNOWLEDGE CHECK] How do OOB swaps update multiple separate page elements in a single HTTP response, and when should you use them?

3. The Code

<!-- Target element triggers lazy load on scroll -->
<div hx-get="/video/stats/" hx-trigger="revealed" hx-swap="outerHTML">
    <div class="animate-pulse">Loading analytics...</div>
</div>

<!-- OOB swap fragment returned from server -->
<div id="menu-counter" hx-swap-oob="true">
    <span class="badge">5 Completed</span>
</div>

4. The Funnel

Stat Level-Up: OOB Tactician (Lvl 1).
Sanjaya Integration: Load video graphs on demand, updating the notification tray icon concurrently.