---
// src/pages/index.astro
import Counter from '../components/Counter.jsx';
---

<h1>Scroll Down</h1>

<div style="height: 150vh;">
  <p>Keep scrolling — the counter is far below.</p>
</div>

<Counter client:visible />

Steps to confirm the deferred download:

1. Open your browser's DevTools Network tab and reload the page.
2. Note that Counter.jsx's own compiled JS chunk does NOT appear in
   the initial page load's network requests.
3. Scroll down toward the counter. Just before it enters the
   viewport, a new network request appears for that component's own
   JS chunk, and the button becomes interactive.

Notes:
- client:visible uses an IntersectionObserver under the hood, only
  triggering the hydration - and the bundle fetch that makes it
  possible - once the component is genuinely about to be seen.
- This is a real, observable difference from client:load, which
  would show the same JS chunk downloading immediately on page load
  regardless of where the component sits on the page.