[ui] Directly set MiddleTruncate truncated text to fix flicker

js_modules/dagster-ui/packages/ui-components/src/components/MiddleTruncate.tsx

@@ -20,19 +20,16 @@ interface Props {
  * When the DOM element resizes, the measurement and calculation steps will occur again.
  */
 export const MiddleTruncate = ({text, showTitle = true}: Props) => {
-  // Track the font style and target maximum width. `null` means no measurement has
-  // taken place yet.
-  const [truncatedText, setTruncatedText] = React.useState<string | null>(null);
-
   // An element that renders the full text into the container, for the purpose of
   // measuring the maximum available/necessary width for our truncated string.
   const measure = React.useRef<HTMLDivElement>(null);
+  const truncated = React.useRef<HTMLDivElement>(null);
 
   // Given the target font style and allotted width, calculate the largest possible middle-
   // truncated string.
   const calculateTargetStyle = React.useCallback(() => {
-    if (measure.current) {
-      setTruncatedText(calculateMiddleTruncatedText(measure.current, text));
+    if (measure.current && truncated.current) {
+      truncated.current.textContent = calculateMiddleTruncatedText(measure.current, text);
     }
   }, [text]);
 
@@ -59,7 +56,7 @@ export const MiddleTruncate = ({text, showTitle = true}: Props) => {
 
   return (
     <Container onCopy={handleCopy} title={showTitle ? text : undefined}>
-      <span>{truncatedText}</span>
+      <span ref={truncated}></span>
       <MeasureWidth ref={measure}>{text}</MeasureWidth>
     </Container>
   );