@takagaki/cortex-decisions-viewer 0.12.173 → 0.12.174

package/dist/render.js

@@ -4923,6 +4923,10 @@ a:hover { text-decoration: underline; }
 .mface { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--border, #e5e7eb); color: var(--muted, #6b7280); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; box-sizing: border-box; }
 a.mface:hover { box-shadow: 0 0 0 2px var(--accent, #4f46e5); }
 .mface svg { width: 18px; height: 18px; display: block; }
+.mface-loading { animation: mface-pulse 1.4s ease-in-out infinite; }
+.mface-loading img { opacity: 0; }
+@keyframes mface-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+@media (prefers-reduced-motion: reduce) { .mface-loading { animation: none; } }
 .mface img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
 .detail-namerow .mface { width: 36px; height: 36px; font-size: 16px; }
 .detail-namerow .mface svg { width: 22px; height: 22px; }
@@ -7741,36 +7745,82 @@ ${story_1.splitByNameLinks.toString()}
   var mfAsked = {};
   var mfWaiting = [];
   var mfTimer = null;
+  /** 頼んでいて答え待ちの人 -> その人の丸（待っている間はスケルトン） */
+  var mfInflight = {};
+  var MF_ASK_TIMEOUT_MS = 8000;
+  var MF_IMG_TIMEOUT_MS = 8000;
+  /** 待ちの形から最後の形へ（loading を外す）。state: photo＝写真が読めた／initial＝頭文字 */
+  function mfSettle(box, state) {
+    if (box.getAttribute("data-state") !== "loading") return;
+    box.classList.remove("mface-loading");
+    box.setAttribute("data-state", state);
+    if (state === "initial") {
+      var img = box.querySelector("img");
+      if (img && img.parentNode) img.parentNode.removeChild(img);
+      box.appendChild(el("span", { class: "mface-initial", text: box.getAttribute("data-initial") || "" }));
+    }
+  }
+  /** 取れた写真を読み込む。読めるまではスケルトンのまま・失敗か時間切れで頭文字（止まり続けない） */
   function mfAttach(box, path) {
-    if (!box.isConnected && !box.parentNode) return;
+    if (box.getAttribute("data-state") !== "loading") return;
     var img = document.createElement("img");
+    var timer = setTimeout(function () { mfSettle(box, "initial"); }, MF_IMG_TIMEOUT_MS);
     img.setAttribute("alt", "");
     img.setAttribute("referrerpolicy", "no-referrer");
-    img.setAttribute("loading", "lazy");
-    img.addEventListener("error", function () { if (img.parentNode) img.parentNode.removeChild(img); });
+    img.addEventListener("load", function () { clearTimeout(timer); mfSettle(box, "photo"); });
+    img.addEventListener("error", function () { clearTimeout(timer); mfSettle(box, "initial"); });
     img.setAttribute("src", PORTAL_ORIGIN + path);
     box.appendChild(img);
   }
+  /** もう答えが分かっている人の丸を決める（写真のパスがあれば読みに行き、無ければ頭文字） */
+  function mfResolve(box, id) {
+    if (mfFaces[id]) mfAttach(box, mfFaces[id]);
+    else mfSettle(box, "initial");
+  }
   function mfFlush() {
     mfTimer = null;
     var waiting = mfWaiting;
     mfWaiting = [];
-    if (!waiting.length || !SITE.intake || !actorTicket()) return;
+    if (!waiting.length) return;
+    if (!SITE.intake || !actorTicket()) { waiting.forEach(function (w) { mfSettle(w.box, "initial"); }); return; }
     var ids = [];
     waiting.forEach(function (w) {
-      if (Object.prototype.hasOwnProperty.call(mfFaces, w.id)) { if (mfFaces[w.id]) mfAttach(w.box, mfFaces[w.id]); return; }
-      if (!Object.prototype.hasOwnProperty.call(mfAsked, w.id) && ids.indexOf(w.id) < 0 && ids.length < 200) ids.push(w.id);
+      if (Object.prototype.hasOwnProperty.call(mfFaces, w.id)) { mfResolve(w.box, w.id); return; }
+      var asked = Object.prototype.hasOwnProperty.call(mfAsked, w.id);
+      if (!asked && ids.indexOf(w.id) < 0) {
+        // 1 回に頼むのは 200 人まで。あふれた人は待たせず頭文字（スケルトンのまま止まらない）
+        if (ids.length >= 200) { mfSettle(w.box, "initial"); return; }
+        ids.push(w.id);
+      }
+      (mfInflight[w.id] = mfInflight[w.id] || []).push(w.box);
     });
     if (!ids.length) return;
     ids.forEach(function (id) { mfAsked[id] = 1; });
+    var finished = false;
+    // 答えが出た（または諦めた）人の待ち行列を空にして、全部の丸を最後の形へ
+    var drain = function () {
+      ids.forEach(function (id) {
+        var boxes = mfInflight[id] || [];
+        delete mfInflight[id];
+        boxes.forEach(function (b) { mfResolve(b, id); });
+      });
+    };
     var give = function (j) {
       (j.people || []).forEach(function (one) {
         if (one && typeof one.userId === "string" && typeof one.avatarUrl === "string" && MF_AVATAR.test(one.avatarUrl)) mfFaces[one.userId] = one.avatarUrl;
       });
       ids.forEach(function (id) { if (!Object.prototype.hasOwnProperty.call(mfFaces, id)) mfFaces[id] = null; });
-      waiting.forEach(function (w) { if (mfFaces[w.id]) mfAttach(w.box, mfFaces[w.id]); });
+      if (!finished) { finished = true; clearTimeout(giveUp); drain(); }
+    };
+    // 失敗・断り・時間切れは覚えない（あとで画面を開き直せば取り直す）。待っていた丸は頭文字に落とす
+    var forget = function () {
+      if (finished) return;
+      finished = true;
+      clearTimeout(giveUp);
+      ids.forEach(function (id) { delete mfAsked[id]; });
+      drain();
     };
-    var forget = function () { ids.forEach(function (id) { delete mfAsked[id]; }); };
+    var giveUp = setTimeout(forget, MF_ASK_TIMEOUT_MS);
     intakeJson(callIntake("member-faces", { op: "member-faces", userIds: ids })).then(function (res) {
       var j = (res && res.j) || {};
       if (res && res.ok && j.ok === true && Array.isArray(j.people)) give(j);
@@ -7805,15 +7855,18 @@ ${story_1.splitByNameLinks.toString()}
       return plain;
     }
     var name = Array.from(humanTitle(rec.title))[0] || "";
+    // 🔴 画像を取りに行っている間は頭文字を出さず、丸の形のスケルトン（確定した表示がすり替わって見えないように）。
+    //    頭文字は「取れなかった・読めなかった・時間切れ」の最後の形にだけ出す。読み上げには「読み込み中」を足さない
     var a = el("a", {
-      class: "mface mface-portal",
+      class: "mface mface-portal mface-loading",
       "data-face": "portal",
+      "data-state": "loading",
+      "data-initial": name,
       href: PORTAL_ORIGIN + "/people/" + encodeURIComponent(id),
       target: "_blank",
       rel: "noopener",
       title: "ポータルでこの人のページを開く",
     });
-    a.appendChild(el("span", { class: "mface-initial", text: name }));
     // 行ごと（カード・詳細）の click に伝えない（カードを押した扱いで詳細へ移らない）
     a.addEventListener("click", function (ev) { ev.stopPropagation(); });
     mfWant(id, a);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.173",
+  "version": "0.12.174",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,