@nanocollective/roster 0.1.0-alpha.26 → 0.1.0-alpha.28

package/templates/portal/js/views/staff.js

@@ -5,13 +5,40 @@
  * and nothing happens until you say so.
  */
 
-import { getStaffProgress, post } from "../api.js";
+import { post } from "../api.js";
 import { askYes, sheet } from "../dialog.js";
+import { pending } from "../inflight.js";
 import { ago, el, esc } from "../dom.js";
+import { whatsLeft, sentence } from "../readiness.js";
 import { refreshAll } from "../refresh.js";
 import { S } from "../state.js";
 import { hireFlow, line, rolePicker } from "./hire.js";
 
+/**
+ * Resolves once nothing is loading and `node` has stopped changing for a moment, or after a few
+ * seconds regardless. Quiet alone was not enough: while GitHub was still answering, nothing
+ * changed, and the half-built list was shown.
+ */
+function settled(node, quiet = 250, most = 6000) {
+  return new Promise((resolve) => {
+    if (typeof MutationObserver !== "function") return resolve();
+    let lastChange = Date.now();
+    const obs = new MutationObserver(() => {
+      lastChange = Date.now();
+    });
+    obs.observe(node, { childList: true, subtree: true, attributes: true, characterData: true });
+    const started = Date.now();
+    const tick = setInterval(() => {
+      const now = Date.now();
+      if ((pending() === 0 && now - lastChange >= quiet) || now - started >= most) {
+        clearInterval(tick);
+        obs.disconnect();
+        resolve();
+      }
+    }, 50);
+  });
+}
+
 /* The open dialog, if any. It lives on <body>, so it outlives a repaint of this screen, and a
    background refresh leaves whatever was typed into it alone. */
 let current = null;
@@ -30,18 +57,27 @@ export function viewStaff(m, o = {}) {
   /* Tasks open in a dialog. Where there is no dialog element (the test shim) they draw into
      the pane instead, which is how this screen always drew them. */
   function present(node) {
-    if (current?.isOpen()) {
-      current.set(node);
-      return;
+    const spin = el("div", { className: "sheetloading" }, [el("span", { className: "spinner" })]);
+    if (current?.isOpen()) current.set(spin);
+    else {
+      current = sheet({
+        node: spin,
+        onClose: () => {
+          current = null;
+          S.staffOpen = null;
+        },
+      });
+      if (!current) {
+        pane.replaceChildren(node);
+        return;
+      }
     }
-    current = sheet({
-      node,
-      onClose: () => {
-        current = null;
-        S.staffOpen = null;
-      },
+    /* The list is built from half a dozen answers arriving one by one, and showing each as it
+       landed meant the dialog reflowed four times. It is shown once it has stopped changing. */
+    const mine = current;
+    settled(node).then(() => {
+      if (mine.isOpen() && current === mine) mine.set(node);
     });
-    if (!current) pane.replaceChildren(node);
   }
   function dismiss() {
     if (current) current.close();
@@ -88,10 +124,11 @@ export function viewStaff(m, o = {}) {
   if (!empty) {
     const list = el("div", { className: "grid", style: "margin-bottom:18px" });
     for (const s of S.data.staff) list.append(card(s));
-    m.append(list);
-    const hire = el("button", { className: "ghbtn primary", textContent: "Hire someone" });
+    // In the grid, where the next person would go, rather than a button under it.
+    const hire = el("button", { className: "hirecard", textContent: "Hire someone" });
     hire.onclick = pick;
-    m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [hire]));
+    list.append(hire);
+    m.append(list);
   }
   m.append(pane);
 
@@ -128,18 +165,16 @@ export function viewStaff(m, o = {}) {
        from disk at once, and the App's secrets and a first run from GitHub when it answers. */
     const finish = el("button", { className: "ghbtn", textContent: "Set up" });
     finish.onclick = () => open(roleOf(s));
-    const unfinished = () => {
+    const warn = el("p", { className: "warnline", hidden: true });
+    whatsLeft(s).then((left) => {
+      if (!left.length) return;
       finish.textContent = "Finish setting up";
       finish.className = "ghbtn primary";
-    };
-    if (s.rig?.charterStub) unfinished();
-    else {
-      getStaffProgress(s.handle)
-        .then((p) => {
-          if (p.app === false || p.ran === false) unfinished();
-        })
-        .catch(() => {});
-    }
+      d.classList.add("notready");
+      warn.hidden = false;
+      warn.textContent = "Not ready to run. Still to do: " + sentence(left) + ".";
+    });
+    d.append(warn);
 
     d.append(
       el("div", { className: "row", style: "margin-top:10px" }, [finish, go, status]),