Client Directives: Transitioning from client:load to client:visible for hydration optimization

Astro 4.x utilizes an Islands Architecture where client directives control the hydration timing of components. While client:load ensures immediate interactivity, it increases the initial JavaScript execution overhead, potentially impacting Core Web Vitals.

Moving to client:visible leverages the Intersection Observer API to defer hydration until the component enters the viewport. However, this transition introduces uncertainty regarding the balance between perceived performance and layout stability, particularly when components have dynamic heights that are only determined after hydration.

What is the recommended strategy for managing layout shift when switching to client:visible? Does Astro provide a native mechanism to reserve space for these islands before the Intersection Observer triggers the load?