[ui] Directly set MiddleTruncate truncated text to fix flicker

[bengotow]

Summary & Motivation

This is a small follow-up to #26834

I've noticed that sometimes with MiddleTruncate, there is a very slight flicker when the text is first rendered. There's a single frame where the rendered text is null, and you can see it before the text appears.

I'm not sure if my computer is just running slow today (looking for excuses to get an M4 now...), or if it's the volume of MiddleTruncates on this page (there are at least 50 rendering all at the same time), but here's an example if you watch the tag on the right:

text-flicker.mov

Looking at the code for this, I don't think there's a reason for the sizing to update React state and set the text through a React render. The text is just used to set the span content, and the component doesn't re-render unless the text changes (in which case calculateTargetStyle changes and the effect runs again.) Setting the textContent directly removes the flicker shown in the video.

How I Tested These Changes

Tested in FF + Chrome manually

[github-actions]

Deploy preview for dagit-storybook ready!

✅ Preview
https://dagit-storybook-g5dvsnocm-elementl.vercel.app
https://bengotow-2025-01-fix-jank-2.components-storybook.dagster-docs.io

Built with commit da70ea5.
This pull request is being automatically deployed with vercel-action

[salazarm]

Makes sense to me! I think this component doesn't using React.memo though so a parent component re-render could cause this component to re-render even if the text content hasn't changed. I think we should add a second ref to record the value of the truncatedText and fallback to that in this case. Or... more simply... just wrap this component with React.memo.

[bengotow]

Ahh good call I'll add a React.memo to this - definitely should have one 👍

[bengotow]

The build errors seem unrelated, going to merge this