ui: metrics refresh intermittently causing visual flash on large clusters

[dhartunian]

Describe the problem

On large clusters loading a dashboard and scrolling around will display pauses and reloads intermittently. Even when looking at a "2 week" timespan which has a window validity of 10 minutes

https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/src/redux/timewindow.ts#L104-L108

we see refreshes every 10/15 seconds.

We do see the loading spinner show up while this happening.

To Reproduce

Load metrics dashboards on a large cluster > 60 nodes and scroll around and wait for a bit.

Expected behavior

Expect to see no visual flashes (ideally even to load new data, should happen smoothly)

Environment:

• CockroachDB version: 20.2.9-alpha
• Client app: DB Console

Additional context
This sounds like an issue that might be caused with all the React layers of indirection used when rendering graphs. For instance, we still have code in the NodeGraphs component that calls React.cloneElement

https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/src/views/cluster/containers/nodeGraphs/index.tsx#L244

It's possible that this triggers a re-mounting of the component instead of an update.

Or this might be a simple issue of showing a loading spinner when in fact we shouldn't...we currently show the loading spinner when there's no data in the component

https://github.com/cockroachdb/cockroach/blob/master/pkg/ui/src/views/cluster/components/linegraph/index.tsx#L518

so it might help to track down why this could happen when we load new data. Maybe it ends up being intermittently set to empty while we're updating.

Epic CC-5280

Jira issue: CRDB-7398

[dhartunian]

Additionally, we should deal with the DOM sizing of the graph nodes thrashing as graphs load.