docs: drop void and async from the InfiniteList recipe

`void` was there to quiet a floating-promise lint rule, and `async` promised a
result nobody awaits. `loadMore` now starts the request and returns nothing,
so the observer calls `loadMore()` and the button takes `onClick={loadMore}`
directly.

The two-argument `.then` is deliberate. `.catch` after it would also swallow a
bug thrown by the state updates in the success path and report it to the user
as a failed request.

Same slop in the lazy-loading section I added two commits ago, caught while
looking: LazyTile reported visibility to its parent through a useEffect on
`inView`, which is the effect the recipe rewrite just removed. It uses
`onChange` now. That fires exactly once under `triggerOnce`, so the parent
counts with a number instead of an id array with an includes() dedupe guard,
and the useCallback around it goes too.

Verified against the browser's own observer, since the docs preview pane was
hidden and a hidden page delivers no intersections at all: the recipe still
passes all seven cases, and the tiles start deferred with no img in the DOM,
count to exactly six on scroll, and do not double-count when scrolled away
and back.

Author: thebuilder

apps/docs/docs/guides/recipes.mdx

@@ -154,25 +154,25 @@ export function InfiniteList<T>({
   const [hasNextPage, setHasNextPage] = useState(true);
   const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
 
-  async function loadMore() {
+  function loadMore() {
     if (status === "loading" || !hasNextPage) return;
 
     setStatus("loading");
-    try {
-      const page = await loadPage(items.length);
-      setItems((current) => [...current, ...page.items]);
-      setHasNextPage(page.hasNextPage);
-      setStatus("idle");
-    } catch {
-      setStatus("error");
-    }
+    loadPage(items.length).then(
+      (page) => {
+        setItems((current) => [...current, ...page.items]);
+        setHasNextPage(page.hasNextPage);
+        setStatus("idle");
+      },
+      () => setStatus("error"),
+    );
   }
 
   const { ref } = useInView({
     rootMargin: "400px 0px",
     skip: status !== "idle" || !hasNextPage,
     onChange: (inView) => {
-      if (inView) void loadMore();
+      if (inView) loadMore();
     },
   });
 
@@ -192,7 +192,7 @@ export function InfiniteList<T>({
       {hasNextPage ? (
         <>
           <div ref={ref} aria-hidden="true" />
-          <button disabled={status === "loading"} onClick={() => void loadMore()}>
+          <button disabled={status === "loading"} onClick={loadMore}>
             {status === "error" ? "Try again" : "Load more"}
           </button>
         </>
@@ -208,6 +208,8 @@ There is no effect here, and that is the point. An empty list puts the sentinel
 
 One `status` beats separate `loading` and `error` booleans: the component cannot be loading and failed at the same time, and the retry button reads its own label from it.
 
+`loadMore` is not `async`. Nothing awaits it, so returning a promise would only invite a caller to try. It starts the request and reports the outcome through state, which is what both the observer and the button want.
+
 `skip` does two jobs. It keeps a second request from starting while one is in flight, and because the hook drops and recreates the observer when `skip` flips back, it re-arms the sentinel. A page too short to push the sentinel out of view keeps loading until the viewport fills.
 
 `rootMargin` starts the request before the sentinel reaches the viewport. Tune the `400px` value to your network and item size. This example sends `items.length` as the next page's `skip`; use whatever pagination your API expects.

apps/docs/pages/_home/Landing.tsx

@@ -544,8 +544,7 @@ function ApiStepCard({
 /* Lazy strip: defer the work until the target is near                */
 /* ================================================================== */
 
-/* Stand-in artwork. Inline SVG keeps the demo self-contained, so a tile that
-   has not been reached yet costs nothing and the page pulls no extra files. */
+/* Stand-in artwork, inline so an unreached tile costs nothing. */
 function art(from: string, to: string, seed: number) {
   const svg =
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">` +
@@ -570,10 +569,7 @@ const PHOTOS = [
 
 function LazyStrip() {
   const ref = useSectionSignal("lazy", "Lazy loading");
-  const [loaded, setLoaded] = useState<string[]>([]);
-  const markLoaded = useCallback((id: string) => {
-    setLoaded((current) => (current.includes(id) ? current : [...current, id]));
-  }, []);
+  const [loaded, setLoaded] = useState(0);
 
   return (
     <section className="rio-section rio-lazy" ref={ref}>
@@ -593,7 +589,7 @@ function LazyStrip() {
             <LazyTile
               index={i}
               key={photo.id}
-              onLoad={markLoaded}
+              onLoad={() => setLoaded((n) => n + 1)}
               photo={photo}
             />
           ))}
@@ -602,7 +598,7 @@ function LazyStrip() {
         <aside className="rio-lazy__panel">
           <div className="rio-counter">
             <span className="rio-counter__num">
-              {loaded.length}
+              {loaded}
               <span className="rio-counter__of">/{PHOTOS.length}</span>
             </span>
             <span className="rio-counter__label">images requested</span>
@@ -651,17 +647,16 @@ function LazyTile({
 }: {
   photo: { id: string; src: string };
   index: number;
-  onLoad: (id: string) => void;
+  onLoad: () => void;
 }) {
   const { ref, inView } = useInView({
     rootMargin: "200px 0px",
     triggerOnce: true,
+    onChange: (visible) => {
+      if (visible) onLoad();
+    },
   });
 
-  useEffect(() => {
-    if (inView) onLoad(photo.id);
-  }, [inView, onLoad, photo.id]);
-
   return (
     <figure className="rio-shot" data-loaded={inView} ref={ref}>
       <div className="rio-shot__frame">

apps/docs/pages/_home/home.css

@@ -1014,8 +1014,8 @@
   border-color: color-mix(in srgb, var(--rio-emerald) 45%, transparent);
 }
 
-/* The frame reserves the tile's space before the image exists, so loading one
-   never shifts the rows below it. This is the part that is easy to skip. */
+/* Reserves the tile's space before the image exists, so loading one never
+   shifts the rows below it. */
 .rio-shot__frame {
   aspect-ratio: 4 / 3;
   border-radius: 8px;
@@ -1099,9 +1099,8 @@
   color: var(--rio-emerald);
 }
 
-/* The badge sits over the frame, so it has to read against both the empty
-   placeholder (theme-coloured) and the loaded artwork (always dark enough
-   for white). Two states, not one colour that only works on one of them. */
+/* The badge sits over the frame, so it needs one color for the theme-tinted
+   placeholder and another for the artwork it covers once loaded. */
 .rio-shot__index {
   position: absolute;
   top: 1rem;