Web: show that the hub is working while a request is slow 16626c0d69c0

  /* Working (#142): on a repository whose store is remote, a land or a

     page can take seconds. A pressed button says what it is doing, with

     the CLI's spinner, and ignores a second press; a navigation that takes

     more than a moment spins the Oxygen mark's rings, in the header and

     beside the pointer. A quick page shows none of it. */

  var SPIN = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

  var waitTimer = 0, spinTimer = 0, pointer = null, mark = null;

  document.addEventListener("pointermove", function (e) {

    pointer = e.pointerType === "mouse" ? { x: e.clientX, y: e.clientY } : null;

    if (mark && pointer) place();

  }, { passive: true });

  function place() {

    if (pointer) { mark.style.left = pointer.x + 14 + "px"; mark.style.top = pointer.y + 14 + "px"; mark.classList.remove("corner"); }

    else mark.classList.add("corner");

  }

  function waiting() {

    clearTimeout(waitTimer);

    waitTimer = setTimeout(function () {

      if (!mark) {

        var logo = document.querySelector("header .brand svg");

        mark = document.createElement("div");

        mark.className = "oxy-wait-mark";

        mark.setAttribute("role", "status");

        mark.setAttribute("aria-label", "Working");

        if (logo) mark.appendChild(logo.cloneNode(true));

        document.body.appendChild(mark);

      }

      place();

      document.documentElement.classList.add("oxy-wait");

    }, 300);

  }

  function busy(button, form) {

    if (!button) return;

    var label = button.getAttribute("data-busy") || button.textContent.trim();

    button.dataset.idle = button.innerHTML;

    button.style.minWidth = button.offsetWidth + "px";

    button.textContent = label + " ";

    var glyph = document.createElement("span");

    glyph.className = "oxy-spin";

    glyph.setAttribute("aria-hidden", "true");

    glyph.textContent = SPIN[0];

    button.appendChild(glyph);

    button.setAttribute("aria-busy", "true");

    var i = 0;

    clearInterval(spinTimer);

    spinTimer = setInterval(function () { glyph.textContent = SPIN[++i % SPIN.length]; }, 80);

    /* Disabled only after the form's data is gathered, so the button's

       own name and value still go with it. */

    setTimeout(function () { button.disabled = true; }, 0);

    form.dataset.sending = "1";

  }

  document.addEventListener("submit", function (e) {

    var form = e.target;

    if (form.dataset.sending) { e.preventDefault(); return; }

    if (e.defaultPrevented || (form.target && form.target !== "_self")) return;

    if ((form.getAttribute("method") || "get").toLowerCase() === "post") {

      busy(e.submitter || form.querySelector("button[type=submit], button:not([type])"), form);

    }

    waiting();

  });

  document.addEventListener("click", function (e) {

    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;

    var a = e.target.closest ? e.target.closest("a[href]") : null;

    if (!a || a.hasAttribute("download") || (a.target && a.target !== "_self")) return;

    var url = new URL(a.href, location.href);

    if (url.origin !== location.origin) return;

    if (url.pathname === location.pathname && url.search === location.search && url.hash) return;

    waiting();

  });

  /* Back to a page the browser kept: it is not working any more. */

  window.addEventListener("pageshow", function (e) {

    if (!e.persisted) return;

    clearTimeout(waitTimer);

    clearInterval(spinTimer);

    document.documentElement.classList.remove("oxy-wait");

    document.querySelectorAll("[aria-busy=true][data-idle]").forEach(function (b) {

      b.innerHTML = b.dataset.idle;

      b.disabled = false;

      b.removeAttribute("aria-busy");

      b.style.minWidth = "";

      if (b.form) delete b.form.dataset.sending;

    });

  });

      {% if let Some(b) = deletable_source %}<form method="post" action="{{ repo.url }}/bookmarks/delete"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="bookmark" value="{{ b }}"><button type="submit" data-busy="Deleting">Delete bookmark</button></form>{% endif %}

          {% if p.is_open() %}<button type="submit" form="pstate" name="action" value="close" class="danger-btn" formnovalidate data-busy="Closing">Close proposal</button>{% endif %}

          {% if p.state == "closed" %}<button type="submit" form="pstate" name="action" value="reopen" formnovalidate data-busy="Reopening">Reopen proposal</button>{% endif %}

        <button type="submit" class="primary-btn" data-busy="Submitting">Submit review</button>

      {% if hub_can_land %}<form method="post" action="{{ repo.url }}/proposal/{{ p.number }}/land"{% if approvals.is_empty() %} onsubmit="return confirm('Land #{{ p.number }} without any approval?')"{% endif %}><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button type="submit" data-busy="LANDING">LAND</button></form>

/* Working (#142): a pressed button's spinner, and the Oxygen mark's rings

   spinning while a slow page loads (hub.js adds .oxy-wait after 300 ms). */

button[aria-busy=true] { cursor: progress; opacity: 1; }

.oxy-spin { display: inline-block; width: 1em; text-align: center; }

.oxy-wait, .oxy-wait * { cursor: progress !important; }

.oxy-wait-mark { display: none; position: fixed; z-index: 1000; pointer-events: none; padding: 4px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); line-height: 0; }

.oxy-wait-mark svg { width: 36px; height: 18px; }

.oxy-wait-mark.corner { left: auto !important; top: calc(env(safe-area-inset-top, 0px) + 68px) !important; right: 16px; }

.oxy-wait .oxy-wait-mark { display: block; }

.oxy-wait header .brand svg circle[r="10"], .oxy-wait-mark svg circle[r="10"] { stroke-dasharray: 44 18.8; animation: oxy-ring .9s linear infinite; }

.oxy-wait header .brand svg circle[cx="11"][r="10"], .oxy-wait-mark svg circle[cx="11"][r="10"] { animation-direction: reverse; }

@keyframes oxy-ring { to { stroke-dashoffset: -62.8; } }

@media (prefers-reduced-motion: reduce) {

  .oxy-wait header .brand svg circle[r="10"], .oxy-wait-mark svg circle[r="10"] { animation: none; stroke-dasharray: none; }

}