https://pooled.run/room/working.js

1// The "working" line for the wait before a model's first token, in Chat and in Code: the Pooled
2// dots in their loading wave and a verb that changes every two seconds (no clock: the wait is not
3// counted out). Presentation only: whoever shows it removes it when output arrives, and its
4// timer stops by itself once it is off the page. With reduced motion the dots hold still and the
5// words change without the fade.
6
7const VERBS = ["Pondering", "Ruminating", "Noodling", "Tinkering", "Percolating", "Mulling", "Brewing", "Musing",
8  "Simmering", "Cogitating", "Puzzling", "Whittling", "Marinating", "Deliberating", "Churning", "Conjuring"];
9// the mark's nine dots (site/logo/mark.svg); --rc is the diagonal, for the wave
10const MARK = '<svg class="wk-mk" width="12" height="12" viewBox="0 0 24 24" aria-hidden="true">'
11  + [[3.4, 3.4, 1.8], [10.2, 3.4, 1.99], [18.5, 3.4, 2.38], [3.4, 10.2, 1.99], [10.2, 10.2, 2.38], [18.5, 10.2, 2.94], [3.4, 18.5, 2.38], [10.2, 18.5, 2.94], [18.5, 18.5, 3.9]]
12    .map(([x, y, r], i) => `<circle cx="${x}" cy="${y}" r="${r}" style="--rc:${Math.round(x / 7) + Math.round(y / 7)}"${i === 8 ? ' class="lit"' : ""}/>`).join("")
13  + "</svg>";
14// the mark alone at another size (the edit overlay over the preview uses it)
15export const markSVG = (size = 12) => MARK.replace('width="12" height="12"', `width="${size}" height="${size}"`);
16const reduced = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
17
18// a random order of the verbs, never the same one twice in a row
19export function verbs(rand = Math.random) {
20  let last = null, bag = [];
21  return () => {
22    if (!bag.length) bag = VERBS.filter((v) => v !== last).sort(() => rand() - 0.5);
23    last = bag.pop();
24    return last;
25  };
26}
27
28// a <span class="working">; since: the performance.now() the wait started; lead: what is happening,
29// in plain words ("Reading your message on 2 devices"), shown for the first LEAD_MS before the verbs,
30// since the verbs alone don't say what the wait is
31export const LEAD_MS = 4000;
32export function working({ since = performance.now(), label = "Working", lead = "" } = {}) {
33  const el = document.createElement("span");
34  el.className = "working";
35  el.innerHTML = `${MARK}<span class="wk-v" aria-hidden="true"></span><span class="sr-only">${label}</span>`;
36  const v = el.querySelector(".wk-v"), next = verbs();
37  let word = -1, seen = false;
38  const born = performance.now();
39  const tick = () => {
40    if (el.isConnected) seen = true;
41    else if (seen || performance.now() - born > 10000) { clearInterval(timer); return; }
42    const t = performance.now() - since, w = lead && t < LEAD_MS ? -2 : Math.floor(t / 2000);
43    if (w !== word) {
44      const first = word === -1;
45      word = w;
46      v.textContent = (w === -2 ? lead : next()) + "…";
47      if (first) return;
48      if (!reduced() && v.animate) v.animate([{ opacity: 0, transform: "translateY(3px)" }, { opacity: 1, transform: "none" }], { duration: 260, easing: "cubic-bezier(.2,.7,.2,1)" });
49    }
50  };
51  const timer = setInterval(tick, 250);
52  tick();
53  return el;
54}
55
56// The band's pill while the room is writing: a word that changes every two seconds, like the working
57// line's verbs ("Twinkling…", "Weaving…"); "Ready" otherwise. liveWords(el) returns set(on).
58export const LIVE = ["Twinkling", "Weaving", "Shimmering", "Humming", "Stitching", "Conjuring", "Scribbling", "Whirring", "Sparkling", "Spinning"];
59export function liveWords(el) {
60  let timer = 0, k = 0;
61  const show = (anim) => {
62    el.textContent = LIVE[k % LIVE.length] + "\u2026";
63    if (anim && !reduced() && el.animate) el.animate([{ opacity: 0, transform: "translateY(3px)" }, { opacity: 1, transform: "none" }], { duration: 260, easing: "cubic-bezier(.2,.7,.2,1)" });
64  };
65  return (on) => {
66    if (on === !!timer) return;
67    if (on) { k = 0; show(false); timer = setInterval(() => { k++; show(true); }, 2000); }
68    else { clearInterval(timer); timer = 0; el.textContent = "Ready"; }
69  };
70}