24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:T867,/** 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((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 } /** Asked every second only while its row is on screen: scroll it away and the * count of requests stops. */ function Watched() { const [server] = React.useState(makeServer) const [row, setRow] = React.useState(null) const poll = usePoll(server.online, { every: 1000, element: row }) return (

{poll.live ? "live" : "paused"} {poll.data ?? "–"} online, {server.asked} asked

) } {Array.from({ length: 8 }, (_, i) => ( // biome-ignore lint/suspicious/noArrayIndexKey: a fixed run of filler rows

row {i + 1}, above

))} {Array.from({ length: 8 }, (_, i) => ( // biome-ignore lint/suspicious/noArrayIndexKey: a fixed run of filler rows

row {i + 10}, below

))} 26:T526e,

/** 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
}

/** Asked every second only while its row is on screen: scroll it away and the
 *  count of requests stops. */
function Watched() {
  const [server] = React.useState(makeServer)
  const [row, setRow] = React.useState<HTMLElement | null>(null)
  const poll = usePoll(server.online, { every: 1000, element: row })
  return (
    <div
      ref={setRow}
      className="flex items-center justify-between gap-4 rounded-lg bg-foreground/5 px-4 py-3 text-[13px]"
    >
      <Status tone={poll.live ? "ok" : "neutral"}>
        {poll.live ? "live" : "paused"}
      </Status>
      <span className="font-mono text-xs tabular-nums">
        {poll.data ?? "–"} online, {server.asked} asked
      </span>
    </div>
  )
}

<ScrollArea className="h-48 w-80 space-y-2 px-2 py-5 text-[13px] text-current/55">
  {Array.from({ length: 8 }, (_, i) => (
    // biome-ignore lint/suspicious/noArrayIndexKey: a fixed run of filler rows
    <p key={i}>row {i + 1}, above</p>
  ))}
  <Watched />
  {Array.from({ length: 8 }, (_, i) => (
    // biome-ignore lint/suspicious/noArrayIndexKey: a fixed run of filler rows
    <p key={i}>row {i + 10}, below</p>
  ))}
</ScrollArea>

20:["$","div","offscreen",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]