Lazy Islands

You can mark islands with mochi:hydrate:visible so each one fetches its JS and CSS only when it scrolls into view, via an IntersectionObserver. Lazy islands also have the benefit of not loading their CSS until they come into view, great for secondary content far down the page.

<script>
  import LazyDemo from './LazyDemo.svelte';
</script>

<div class="stack">
  {#each Array(6) as _, i (i)}
    <div class="item">
      <h3>Lazy Island #{i + 1}</h3>
      <LazyDemo mochi:hydrate:visible index={i + 1} />
    </div>
  {/each}
</div>

<style>
  .stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .item h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
  }
</style>