Metric text bounces when container size changed

[drewdaemon]

Describe the issue
When the container size is updated along with the layout of the tiles, the text of the metric briefly changes size before adjusting itself.

To Reproduce
Steps to reproduce the behavior:

1. Visit the metric grid story here
2. Change the column count

Expected behaviour
The text shouldn't resize.

Screenshots

Screen.Recording.2023-11-09.at.6.22.20.AM.mov

Kibana Cross Issues
Blocking elastic/kibana#136993

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• Every related Kibana issue is listed under Kibana Cross Issues list and the kibana cross issue tag is applied

[drewdaemon]

Both the data and the container dimensions are needed to compute the correct text size.

It seems like this bug is due to the calculation being run with up-to-date data and out-of-date container dimensions.

The following console statements illustrate this.

The first two lines are logged from the first parent render. You can see that a grid of width 4 is rendered with a container width of 800.

The second two are from the second parent render. Now we have a grid of width 3 being rendered with a container width of 600.

The third pair (highlighted) are from the first chart render. Here we have a grid of width 3 (new data) being rendered with an assumed width of 800 (old width). This is where we see the incorrect text size.

Then, the fourth pair are from the second chart render. It is triggered when the container width catches up to the data and the text size is corrected.

[drewdaemon]

@nickofthyme any insights into why this might be happening?

[drewdaemon]

What is going on?

@nickofthyme and I did some investigating. Here is what is roughly happening

First React render

1. the user updates the number of columns setting
2. container CSS and Metric data prop are updated
3. container is resized by the browser
4. metric renderer receives new data
5. text size is computed (incorrectly) using old container dimensions with new data

Second React render

1. metric renderer receives updated container dimensions
2. text size is computed correctly, using new container dimensions and existing data

Recap

So, the problem is essentially that new data is being received a render cycle before new container dimensions.

Computing correct text size

1. depends on the browser updating the dimensions of the parent container
2. is tied to the React render queue instead of the browser's layout process, causing a delay

If the new data is held back until the new container dimensions are received, the text size issue isn't present, however a distorted visualization is shown when the container dimensions have been updated, but React hasn't had a chance to render yet:

Screen.Recording.2023-11-10.at.11.04.34.AM.mp4

Possible solutions

• The client could supply expected dimensions through the React contract that are then replaced with the real container dimensions once available. In many cases, they would match or be close, so the text wouldn't need to be updated.
• The text could be sized using CSS container queries. This would divorce text size from the React cycle and allow it to update on container resize as part of the browser's layout sequence.