Async Infinite Scroll

1"use client"23import { createSignal, createMemo, onMount, onCleanup } from '@barefootjs/client'45type Article = { id: number; title: string; liked: boolean; saved: boolean; /* ... */ }6type FetchStatus = 'idle' | 'loading' | 'error' | 'end'78export function InfiniteScrollDemo() {9  const [items, setItems] = createSignal<Article[]>(INITIAL_ITEMS)10  const [cursor, setCursor] = createSignal(1)11  const [status, setStatus] = createSignal<FetchStatus>('idle')1213  const totalCount = createMemo(() => items().length)14  const likedCount = createMemo(() => items().filter(a => a.liked).length)1516  const toggleLike = (id: number) => {17    setItems(prev => prev.map(a => a.id === id ? { ...a, liked: !a.liked } : a))18  }1920  const loadMore = async () => {21    if (status() === 'loading' || status() === 'end') return22    setStatus('loading')23    try {24      const newItems = await fetchPage(cursor())25      setItems(prev => [...prev, ...newItems]) // mapArray append26      setCursor(c => c + 1)27      setStatus('idle')28    } catch {29      setStatus('error')30    }31  }3233  onMount(() => {34    const sentinel = document.querySelector('.is-sentinel')35    const observer = new IntersectionObserver(36      entries => { if (entries[0].isIntersecting) loadMore() },37      { threshold: 0.1 }38    )39    observer.observe(sentinel!)40    onCleanup(() => observer.disconnect()) // effect cleanup on unmount41  })4243  return (44    <div>45      <div>{totalCount()} articles · {likedCount()} liked</div>4647      {/* <Async> boundary — IRAsync wrapping a signal-driven map */}48      <Async fallback={<ArticleSkeleton />}>49        <div data-slot="article-list">50          {items().map(article => (51            <article key={article.id}>52              <h3>{article.title}</h3>53              <button54                aria-pressed={article.liked ? 'true' : 'false'}55                onClick={() => toggleLike(article.id)}56              >57                {article.liked ? '♥' : '♡'}58              </button>59            </article>60          ))}61        </div>62      </Async>6364      {/* Sentinel + status branches */}65      <div className="is-sentinel">66        {status() === 'loading' ? <p>Loading…</p> : null}67        {status() === 'error'   ? <button onClick={loadMore}>Retry</button> : null}68        {status() === 'end'     ? <p>You have reached the end · {totalCount()} articles</p> : null}69      </div>70    </div>71  )72}