Debounced search

import { html, mount, createState, each, onCleanup } from "@zoijs/core";
import { resource } from "@zoijs/resource";

const search = (q) =>
  fetch(`/api/search?q=${encodeURIComponent(q)}`).then((r) => r.json());

function Search() {
  const query = createState("");

  // The resource reads the CURRENT query when it runs; refresh() re-runs it.
  // resource is race-safe: a slow response for an old query can't overwrite a
  // newer one (see @zoijs/resource).
  const results = resource(() => {
    const q = query.peek().trim();
    return q ? search(q) : [];
  });

  // Debounce: refresh 250ms after the last keystroke.
  let timer;
  const onInput = (e) => {
    query.set(e.target.value);
    clearTimeout(timer);
    timer = setTimeout(() => results.refresh(), 250);
  };
  onCleanup(() => clearTimeout(timer)); // never fire after unmount

  return html`
    <section role="search">
      <input
        type="search"
        value=${() => query.get()}
        oninput=${onInput}
        placeholder="Search…"
        aria-label="Search"
      />

      ${() => results.loading() && html`<span class="spinner" aria-live="polite">Searching…</span>`}
      ${() => results.error() && html`<p class="error">Search failed.</p>`}

      <ul>
        ${each(
          () => results.data() ?? [],
          (hit) => hit.id,
          (hit) => html`<li><a href=${`/item/${hit.id}`}>${hit.title}</a></li>`
        )}
      </ul>

      ${() =>
        !results.loading() && query.get().trim() && (results.data() ?? []).length === 0
          ? html`<p>No matches for “${query.get()}”.</p>`
          : null}
    </section>
  `;
}

mount(Search, "#app");