perf(web): stop measuring table cells while replies stream (#26152)

Author: t3dotgg

apps/web/src/components/chat/MarkdownTable.tsx

@@ -3,7 +3,6 @@ import { useRef, useState, type ComponentProps } from "react";
 
 import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
 import { getClientSettings } from "../../hooks/useSettings";
-import { observeResize } from "../../lib/observeResize";
 import {
   serializeTableElementToCsv,
   serializeTableElementToMarkdown,
@@ -15,35 +14,9 @@ import { ScrollArea } from "../ui/scroll-area";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { reportMarkdownActionFailure } from "./markdownActionFailure";
 
-/**
- * Whether any cell is clipped in the unwrapped layout. Only then does the wrap
- * toggle change anything, so short tables hide it. Measures with the container
- * briefly unwrapped and restores it before the browser paints.
- */
-function tableHasClippedCells(container: HTMLElement, table: HTMLTableElement): boolean {
-  const viewport = table.closest<HTMLElement>('[data-slot="scroll-area-viewport"]');
-  const scrollLeft = viewport?.scrollLeft ?? 0;
-  const previous = container.dataset.expanded;
-  container.dataset.expanded = "false";
-  try {
-    for (const row of table.rows) {
-      for (const cell of row.cells) {
-        if (cell.scrollWidth > cell.clientWidth) return true;
-      }
-    }
-    return false;
-  } finally {
-    if (previous === undefined) delete container.dataset.expanded;
-    else container.dataset.expanded = previous;
-    // The unwrapped layout can be narrower and clamp a sideways scroll.
-    if (viewport && scrollLeft > 0) viewport.scrollLeft = scrollLeft;
-  }
-}
-
 export function MarkdownTable({ children, ...props }: ComponentProps<"table">) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [expanded, setExpanded] = useState(() => getClientSettings().wordWrap);
-  const [hasClippedCells, setHasClippedCells] = useState(false);
   const { copyToClipboard, isCopied: copied } = useCopyToClipboard<"markdown" | "csv">({
     timeout: 1200,
     onError: (cause, format) =>
@@ -52,25 +25,6 @@ export function MarkdownTable({ children, ...props }: ComponentProps<"table">) {
   const expandLabel = expanded ? "Collapse table cells" : "Expand table cells";
   const copyLabel = copied ? "Copied" : "Copy table";
 
-  // React calls this with null when a previous attach returned no cleanup.
-  const attachContainer = (container: HTMLDivElement | null) => {
-    containerRef.current = container;
-    const table = container?.querySelector("table");
-    if (!container || !table) return;
-    const measure = () => setHasClippedCells(tableHasClippedCells(container, table));
-    measure();
-    // A streamed cell can grow until it clips while the table keeps its size, and a
-    // narrower column can clip a cell without this component rendering.
-    const mutations = new MutationObserver(measure);
-    mutations.observe(table, { childList: true, characterData: true, subtree: true });
-    const stopResize = observeResize(table, measure);
-    return () => {
-      mutations.disconnect();
-      stopResize();
-      containerRef.current = null;
-    };
-  };
-
   const handleCopy = (format: "markdown" | "csv") => {
     const table = containerRef.current?.querySelector("table");
     if (!table) return;
@@ -84,7 +38,7 @@ export function MarkdownTable({ children, ...props }: ComponentProps<"table">) {
 
   return (
     <div
-      ref={attachContainer}
+      ref={containerRef}
       className="chat-markdown-table-container"
       data-expanded={expanded ? "true" : "false"}
     >
@@ -93,27 +47,23 @@ export function MarkdownTable({ children, ...props }: ComponentProps<"table">) {
       </ScrollArea>
       {/* Stays within the row's px-1: the chat lane clips sideways overflow. */}
       <div className="mt-0.5 -mx-1 flex items-center justify-between select-none">
-        {hasClippedCells ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  type="button"
-                  variant={expanded ? "secondary" : "ghost-muted"}
-                  size="icon-xs"
-                  aria-pressed={expanded}
-                  onClick={() => setExpanded((value) => !value)}
-                  aria-label={expandLabel}
-                />
-              }
-            >
-              <MorphIcon className="size-3" icon={expanded ? Minimize2 : Maximize2} />
-            </TooltipTrigger>
-            <TooltipPopup side="top">{expandLabel}</TooltipPopup>
-          </Tooltip>
-        ) : (
-          <span />
-        )}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button
+                type="button"
+                variant={expanded ? "secondary" : "ghost-muted"}
+                size="icon-xs"
+                aria-pressed={expanded}
+                onClick={() => setExpanded((value) => !value)}
+                aria-label={expandLabel}
+              />
+            }
+          >
+            <MorphIcon className="size-3" icon={expanded ? Minimize2 : Maximize2} />
+          </TooltipTrigger>
+          <TooltipPopup side="top">{expandLabel}</TooltipPopup>
+        </Tooltip>
         <Menu>
           <Tooltip>
             <TooltipTrigger