Busy Cursor <mv-busy-cursor>

node scripts/add.mjs busy-cursor --out ./src/marvelous

<mv-busy-cursor id="orders"> …your table… </mv-busy-cursor>
<!-- then: orders.track(fetch("/api/orders")) or orders.busy = true -->

<div id="mv-bc-demo">
  <style>
    #mv-bc-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; width: min(100%, 56rem); margin-inline: auto; }
    #mv-bc-demo .panel { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-xl); background: var(--mv-surface); overflow: hidden; }
    #mv-bc-demo .head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .6rem .6rem 1rem; border-bottom: 1px solid var(--mv-border); }
    #mv-bc-demo .head strong { font-size: .9rem; font-weight: var(--mv-weight-semibold); }
    #mv-bc-demo .head span { display: block; color: var(--mv-fg-subtle); font-size: .75rem; }
    #mv-bc-demo table { width: 100%; border-collapse: collapse; font-size: .82rem; }
    #mv-bc-demo td { padding: .5rem 1rem; border-bottom: 1px solid var(--mv-border); white-space: nowrap; }
    #mv-bc-demo tr:last-child td { border-bottom: 0; }
    #mv-bc-demo td:nth-child(2) { color: var(--mv-fg-muted); width: 100%; }
    #mv-bc-demo td.num { text-align: end; font-variant-numeric: tabular-nums; }
    #mv-bc-demo td:last-child { padding-inline-start: 0; text-align: end; }
    #mv-bc-demo .done { color: var(--mv-fg-subtle); font-size: .75rem; }
    #mv-bc-demo .foot { padding: .55rem 1rem; border-top: 1px solid var(--mv-border); color: var(--mv-fg-muted); font-size: .75rem; min-height: 1.1rem; }
    #mv-bc-demo .chart { display: flex; gap: .45rem; padding: 1rem 1rem .5rem; }
    #mv-bc-demo .bar { flex: 1; display: grid; grid-template-rows: 7.5rem auto; justify-items: center; gap: .35rem; color: var(--mv-fg-subtle); font-size: .7rem; }
    #mv-bc-demo .col { display: flex; align-items: flex-end; width: 100%; }
    #mv-bc-demo .bar i { display: block; width: 100%; border-radius: var(--mv-radius-sm) var(--mv-radius-sm) 2px 2px; background: color-mix(in oklch, var(--mv-accent) 70%, var(--mv-surface)); transition: height var(--mv-duration-slow) var(--mv-ease-out); }
    #mv-bc-demo .range { display: flex; gap: .25rem; padding: 0 1rem .75rem; }
  </style>

  <section class="panel" aria-labelledby="mv-bc-orders-title">
    <div class="head">
      <div><strong id="mv-bc-orders-title">Recent orders</strong><span id="mv-bc-orders-time">Updated 10:42 AM</span></div>
      <button class="mv-button" data-variant="outline" data-size="sm" id="mv-bc-refresh">Refresh</button>
    </div>
    <mv-busy-cursor id="mv-bc-orders" dim hold-clicks>
      <table>
        <tbody>
          <tr><td>#1042</td><td>Amara Okafor</td><td class="num">$184.00</td><td><button class="mv-button" data-variant="ghost" data-size="sm" data-refund>Refund</button></td></tr>
          <tr><td>#1041</td><td>Mateo Rossi</td><td class="num">$62.50</td><td><button class="mv-button" data-variant="ghost" data-size="sm" data-refund>Refund</button></td></tr>
          <tr><td>#1040</td><td>Yuki Tanaka</td><td class="num">$1,249.99</td><td><button class="mv-button" data-variant="ghost" data-size="sm" data-refund>Refund</button></td></tr>
          <tr><td>#1039</td><td>Sofia Lindqvist</td><td class="num">$38.00</td><td><button class="mv-button" data-variant="ghost" data-size="sm" data-refund>Refund</button></td></tr>
        </tbody>
      </table>
    </mv-busy-cursor>
    <div class="foot" id="mv-bc-orders-log">Refresh, then click Refund while it loads: the click waits and runs once.</div>
  </section>

  <section class="panel" aria-labelledby="mv-bc-chart-title">
    <div class="head">
      <div><strong id="mv-bc-chart-title">Revenue by week</strong><span id="mv-bc-chart-range">Last 6 weeks · USD</span></div>
      <button class="mv-button" data-variant="outline" data-size="sm" id="mv-bc-recompute">Recompute</button>
    </div>
    <mv-busy-cursor id="mv-bc-chart" hold-clicks="drop">
      <div class="chart" id="mv-bc-bars"></div>
      <div class="range" role="group" aria-label="Range">
        <button class="mv-button" data-variant="secondary" data-size="sm" aria-pressed="true" data-weeks="6">6 weeks</button>
        <button class="mv-button" data-variant="ghost" data-size="sm" aria-pressed="false" data-weeks="12">12 weeks</button>
      </div>
    </mv-busy-cursor>
    <div class="foot">Real progress in the ring; clicks during the recompute are dropped with a shake.</div>
  </section>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const wait = (ms) => new Promise((r) => setTimeout(r, ms));
    const time = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit" });
    const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });

    const orders = $("mv-bc-orders");
    const log = $("mv-bc-orders-log");
    $("mv-bc-refresh").addEventListener("click", () => {
      orders.track(wait(2200)).then(() => { $("mv-bc-orders-time").textContent = `Updated ${time.format(new Date())}`; });
    });
    orders.addEventListener("click", (e) => {
      const button = e.target.closest("[data-refund]");
      if (!button) return;
      const row = button.closest("tr");
      button.replaceWith(Object.assign(document.createElement("span"), { className: "done", textContent: "Refunded" }));
      log.textContent = `Refund issued for ${row.cells[0].textContent} (${row.cells[1].textContent}).`;
    });
    orders.addEventListener("mv-click-held", () => { log.textContent = "Click held: it will run once the list is up to date."; });

    const chart = $("mv-bc-chart");
    const bars = $("mv-bc-bars");
    const draw = (weeks) => {
      const values = Array.from({ length: 6 }, (_, i) => 18000 + Math.round(Math.sin(i * 1.3 + weeks) * 6000 + i * 1500 * (weeks / 6)));
      const max = Math.max(...values);
      bars.replaceChildren(...values.map((v, i) => {
        const bar = document.createElement("div");
        bar.className = "bar";
        bar.title = money.format(v);
        const fill = document.createElement("i");
        fill.style.height = `${Math.round((v / max) * 100)}%`;
        const col = document.createElement("div");
        col.className = "col";
        col.append(fill);
        bar.append(col, `W${i + 1}`);
        return bar;
      }));
    };
    const recompute = async (weeks) => {
      if (chart.busy) return;
      chart.progress = 0;
      await chart.track(async () => {
        for (let i = 1; i <= 10; i++) { await wait(260); chart.progress = i / 10; }
      });
      chart.progress = null;
      draw(weeks);
    };
    let weeks = 6;
    draw(weeks);
    $("mv-bc-recompute").addEventListener("click", () => recompute(weeks));
    chart.querySelectorAll("[data-weeks]").forEach((b) => b.addEventListener("click", () => {
      weeks = Number(b.dataset.weeks);
      chart.querySelectorAll("[data-weeks]").forEach((o) => {
        o.setAttribute("aria-pressed", String(o === b));
        o.dataset.variant = o === b ? "secondary" : "ghost";
      });
      $("mv-bc-chart-range").textContent = `Last ${weeks} weeks · USD`;
      recompute(weeks);
    }));
  </script>
</div>