perf(timeline): gate heavy message render behind useDeferredValue (#1022)

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@sprout-oss.stage.blox.sqprod.co>

Author: 3 people

desktop/src/features/messages/lib/threadPanel.test.mjs

@@ -103,6 +103,114 @@ test("buildThreadPanelData keeps direct comments unindented", () => {
   );
 });
 
+// Per-id stabilization: thread rows feed `MessageRow` a depth-normalized copy
+// of each reply. When `timelineMessages` churns (typing/presence) but the
+// reply objects survive by reference, rebuilding the thread panel must hand
+// `MessageRow` the SAME normalized object reference so the row/markdown memo
+// hits — instead of a fresh `{ ...reply, depth }` spread every render.
+test("thread reply objects keep identity across unrelated timelineMessages churn", () => {
+  const root = message({ id: "root", createdAt: 1 });
+  const replyA = message({
+    id: "a",
+    createdAt: 2,
+    parentId: "root",
+    rootId: "root",
+    depth: 1,
+    tags: [["e", "root", "", "reply"]],
+  });
+  const replyB = message({
+    id: "b",
+    createdAt: 3,
+    parentId: "a",
+    rootId: "root",
+    depth: 2,
+    tags: [["e", "a", "", "reply"]],
+  });
+
+  // First render of the thread.
+  const first = buildThreadPanelData(
+    [root, replyA, replyB],
+    "root",
+    "root",
+    new Set(["a"]),
+  );
+
+  // An unrelated channel churn produces a NEW `timelineMessages` array, but the
+  // reply objects themselves are reused by reference (only their position in
+  // the surrounding array changed — e.g. a presence ping or typing indicator
+  // that the snapshot layer leaves the reply identities intact for).
+  const churned = [
+    message({ id: "noise", createdAt: 99 }),
+    root,
+    replyA,
+    replyB,
+  ];
+  const second = buildThreadPanelData(churned, "root", "root", new Set(["a"]));
+
+  const firstById = new Map(
+    first.visibleReplies.map((entry) => [entry.message.id, entry.message]),
+  );
+  const secondById = new Map(
+    second.visibleReplies.map((entry) => [entry.message.id, entry.message]),
+  );
+
+  assert.ok(firstById.size > 0, "expected at least one visible reply");
+  for (const [id, normalized] of firstById) {
+    assert.strictEqual(
+      secondById.get(id),
+      normalized,
+      `normalized reply ${id} must be the SAME object reference across an unrelated churn (memo hit)`,
+    );
+    // Depth must still reach the row correctly via the cached object.
+    assert.equal(
+      typeof normalized.depth,
+      "number",
+      `normalized reply ${id} must carry a numeric depth`,
+    );
+  }
+});
+
+test("thread reply objects recompute when the source reply object is replaced", () => {
+  const root = message({ id: "root", createdAt: 1 });
+  const reply = message({
+    id: "a",
+    createdAt: 2,
+    parentId: "root",
+    rootId: "root",
+    depth: 1,
+    tags: [["e", "root", "", "reply"]],
+  });
+
+  const first = buildThreadPanelData([root, reply], "root", "root", new Set());
+
+  // A genuine edit/refresh: the reply is a brand-new object (new identity).
+  const editedReply = message({
+    id: "a",
+    createdAt: 2,
+    parentId: "root",
+    rootId: "root",
+    depth: 1,
+    body: "edited body",
+    tags: [["e", "root", "", "reply"]],
+  });
+  const second = buildThreadPanelData(
+    [root, editedReply],
+    "root",
+    "root",
+    new Set(),
+  );
+
+  const firstA = first.visibleReplies.find((e) => e.message.id === "a");
+  const secondA = second.visibleReplies.find((e) => e.message.id === "a");
+  assert.ok(firstA && secondA, "expected reply 'a' in both renders");
+  assert.notStrictEqual(
+    secondA.message,
+    firstA.message,
+    "a replaced source reply must produce a fresh normalized object",
+  );
+  assert.equal(secondA.message.body, "edited body");
+});
+
 test("buildThreadPanelDataFromIndex matches direct panel data", () => {
   const root = message({ id: "root", createdAt: 1 });
   const directComment = message({

desktop/src/features/messages/lib/threadPanel.ts

@@ -47,14 +47,47 @@ function normalizeHeadMessage(message: TimelineMessage): TimelineMessage {
   };
 }
 
+// Thread rows feed `MessageRow` a depth-normalized copy of each reply. Building
+// that copy fresh (`{ ...message, depth }`) on every render hands `MessageRow` a
+// new object identity every time `timelineMessages` churns (typing/presence),
+// even when the reply and its depth are byte-identical — which defeats the
+// row/markdown memo and forces a ~1.4ms/row re-parse on threads where the main
+// timeline (which passes the raw stable ref) stays cheap.
+//
+// Mirror the main list's per-id context memoization (`videoReviewContextById`):
+// cache the normalized object keyed on the source reply identity + depth, so an
+// unrelated channel churn that leaves a reply (and its tree position) intact
+// reuses the exact same object reference and the memo hits.
+//
+// Keyed on the source `reply` reference via a WeakMap: a new `timelineMessages`
+// set produces new reply objects (genuine recompute), and stale entries are
+// collected automatically when the old message set is dropped.
+const normalizedInlineReplyCache = new WeakMap<
+  TimelineMessage,
+  Map<number, TimelineMessage>
+>();
+
 function normalizeInlineReplyMessage(
   message: TimelineMessage,
   depth: number,
 ): TimelineMessage {
-  return {
+  let byDepth = normalizedInlineReplyCache.get(message);
+  if (!byDepth) {
+    byDepth = new Map<number, TimelineMessage>();
+    normalizedInlineReplyCache.set(message, byDepth);
+  }
+
+  const cached = byDepth.get(depth);
+  if (cached) {
+    return cached;
+  }
+
+  const normalized: TimelineMessage = {
     ...message,
     depth,
   };
+  byDepth.set(depth, normalized);
+  return normalized;
 }
 
 function buildDirectChildrenByParentId(messages: TimelineMessage[]) {