1 files changed, 16 insertions, 5 deletions
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 5d49311..e5ed7a7 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -828,8 +828,16 @@ function layout(nodes, pairs, width, height, only) {
         y: height / 2 + (Math.random() - .5) * height / 2 });
     }
   }
-  for (let round = 0; round < 120; round++) relax(nodes, pairs, width, height, 1, 10, only);
+  // Each round is as long as there are pairs of nodes: with many members, fewer rounds
+  // than 120 rather than a page that stops for seconds (`LAYOUT_FOR_MS`).
+  const until = performance.now() + LAYOUT_FOR_MS;
+  for (let round = 0; round < 120 && performance.now() < until; round++) {
+    relax(nodes, pairs, width, height, 1, 10, only);
+  }
 }
+// How long a layout may hold the page up at once, in ms; what it leaves, the map
+// settles into while shown (`settle`).
+const LAYOUT_FOR_MS = 150;
 // One round of the layout: every node moved by `gain` of the forces on it, at most
 // `most` px. Returns how far the furthest moved. A gain of 1 overshoots where a node
 // has several links (the pulls add up): it gets close fast, then swings about its
@@ -1073,12 +1081,15 @@ function renderGraph() {
     const fresh = new Set(nodes.filter(id => !positions.has(id)));
     if (relayout) {
       layout(nodes, pairs, width, height);
-      // Dynamic: settled at once, not moving into place before one's eyes.
+      // Dynamic: settled at once, not moving into place before one's eyes; as far as
+      // `LAYOUT_FOR_MS` allows (with many members), the rest frame by frame (`settle`).
       if (byRtt) {
-        for (let round = 0; round < 3000; round++) {
-          if (relax(nodes, pairs, width, height, .15, 2) <= .1) break;
+        const until = performance.now() + LAYOUT_FOR_MS;
+        let settled = false;
+        for (let round = 0; round < 3000 && performance.now() < until; round++) {
+          if (relax(nodes, pairs, width, height, .15, 2) <= .1) { settled = true; break; }
         }
-        lastLengths = pairs.map(pair => pair.join(" ")).join(",");
+        if (settled) lastLengths = pairs.map(pair => pair.join(" ")).join(",");
       }
     } else if (fresh.size > 0) {
       layout(nodes, pairs, width, height, fresh);