27:T8c99,
/** A stand-in for an API: visitors online now, answered after 300 to 900 ms (it
 *  honours the abort), failing once when told to. It counts what it was asked. */
function makeServer() {
  let online = 42
  let failNext = false
  const s = {
    asked: 0,
    failOnce: () => {
      failNext = true
    },
    online: (signal: AbortSignal) =>
      new Promise<number>((resolve, reject) => {
        s.asked++
        const answer = window.setTimeout(
          () => {
            if (failNext) {
              failNext = false
              reject(new Error("503 from /api/online"))
              return
            }
            online = Math.max(
              0,
              online + Math.round((Math.random() - 0.45) * 6),
            )
            resolve(online)
          },
          300 + Math.random() * 600,
        )
        signal.addEventListener("abort", () => {
          window.clearTimeout(answer)
          reject(signal.reason)
        })
      }),
  }
  return s
}

/** Visitors online, asked every 3 s while the tab is visible and the tile on screen;
 *  the last answers drawn as its trend. */
function Online() {
  const [server] = React.useState(makeServer)
  const [tile, setTile] = React.useState<HTMLElement | null>(null)
  const [on, setOn] = React.useState(true)
  const poll = usePoll(server.online, {
    every: 3000,
    element: tile,
    enabled: on,
  })
  const [trend, setTrend] = React.useState<number[]>([])
  const online = poll.data
  React.useEffect(() => {
    if (online !== undefined) setTrend((t) => [...t.slice(-29), online])
  }, [online])
  return (
    <div className="flex w-72 flex-col gap-3">
      <Stat ref={setTile}>
        <StatLabel>online now</StatLabel>
        <StatValue>{poll.data ?? "–"}</StatValue>
        <StatNote className="flex flex-wrap items-baseline gap-x-2">
          <Status tone={poll.error ? "bad" : poll.live ? "ok" : "neutral"}>
            {poll.error ? "failing" : poll.live ? "live" : "paused"}
          </Status>
          {poll.updated !== null && (
            <span>
              updated <RelativeTime at={poll.updated} />
            </span>
          )}
        </StatNote>
        <StatChart>
          <Sparkline values={trend} label="visitors online, last answers" />
        </StatChart>
      </Stat>
      <div className="flex flex-wrap items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          disabled={poll.loading}
          onClick={() => poll.refresh()}
        >
          {/* Both words in one cell, the other hidden: the button is as wide as
              the longer, so nothing beside it moves when it changes. */}
          <span className="grid">
            <span
              className={cn("[grid-area:1/1]", poll.loading && "invisible")}
            >
              refresh
            </span>
            <span
              aria-hidden={!poll.loading}
              className={cn("[grid-area:1/1]", !poll.loading && "invisible")}
            >
              asking…
            </span>
          </span>
        </Button>
        <Button variant="ghost" size="sm" onClick={server.failOnce}>
          fail the next
        </Button>
        <Switch checked={on} onCheckedChange={setOn} size="sm">
          polling
        </Switch>
      </div>
      {/* Under the controls, so its coming and going moves nothing above it. */}
      {poll.error && (
        <p className="m-0 text-[13px] text-current/60">
          {poll.error.message}; the last answer is kept and it asks again on its
          cadence.
        </p>
      )}
    </div>
  )
}

<Online />
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]