llms.txt

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.

Lazy Island #1

#1 Waiting to hydrate...

Lazy Island #2

#2 Waiting to hydrate...

Lazy Island #3

#3 Waiting to hydrate...

Lazy Island #4

#4 Waiting to hydrate...

Lazy Island #5

#5 Waiting to hydrate...

Lazy Island #6

#6 Waiting to hydrate...

View source on GitHub

<script>
  import LazyDemo from './LazyDemo.svelte';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</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>

Styles

<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>