Defer off-screen Query Loop blocks to a viewport placeholder

[roborourke]

Summary

An alternative approach to making pages with many Query Loop blocks more performant in the editor.

Rendering a Query Loop's edit component mounts the core block, which immediately fires a REST request to fetch its posts for the preview. On a page with lots of query loops, every one of those requests is dispatched up front on editor load — slow, and it can hammer the server.

This adds a withViewportPlaceholder HOC that replaces an off-screen Query Loop with a cheap placeholder that issues no requests. The real block is only mounted once it scrolls near the viewport, spreading the API requests out as the user scrolls rather than firing them all at load.

How it works

• withViewportPlaceholder wraps core/query's editor.BlockEdit. It is registered last, so it is the outermost HOC — while the placeholder is shown, none of the plugin's other core/query enhancements (nor the core block itself) are mounted.
• QueryLoopPlaceholder renders a <Placeholder> + <Spinner> and attaches an IntersectionObserver. The observer is constructed from the target node's own ownerDocument.defaultView, so it uses the correct viewport whether or not the editor canvas is iframed (site editor / block-themed post editor). A 300px rootMargin preloads a block just before it comes on screen. If IntersectionObserver is unavailable, the block renders immediately as a safe fallback.
• Immediate render on interaction: selecting the block (e.g. right after inserting it) or selecting one of its inner blocks via the List View renders it immediately, so it never gets stuck as an unmountable placeholder.
• Latching: once a block has been rendered it stays rendered, so scrolling away does not discard edits or trigger a refetch.

Changes

• src/index.js — new QueryLoopPlaceholder component and withViewportPlaceholder HOC + filter registration.
• src/index.scss — placeholder styling (reserves min-height so the block is observable and the layout doesn't jump on swap-in).
• tests/e2e/viewport-placeholder.spec.js — e2e coverage: off-screen loops render placeholders and load on scroll; a selected loop renders immediately.
• CLAUDE.md — documents the new lazy-rendering behavior.

Testing

• npm run build — compiles cleanly.
• npm run lint:js / npm run lint:css — clean.
• E2E spec added but not run in this environment (no Docker/wp-env available here).

🤖 Generated with Claude Code

---

Generated by Claude Code

[github-actions]

Playwright test results

 22 passed

Details

 22 tests across 7 suites
 1 minute, 11 seconds
 0f34880