[Dashboard] improve performance for initial rendering

[mbondyra]

Summary

While investigating why renderPanelContents runs three times on page load (I remove one of 3 in my refactoring PR, but want to understand the second re-render too), I found that the issue is caused by the useCallback dependency on dashboardContainer. dashboardContainer is the HTML element we pass to the grid items. To prevent unnecessary re-renders, I’ve updated it to pass the entire ref instead of the element itself.

I’m unsure if this change might introduce other issues, as I don't know if I caught all the usecases for using it. What I tested (and didn't break) is this flow (and it still works correctly):

• open a dashboard
• for a Lens visualization that's not on top of the screen, click on 'edit' button
• expected behavior: the visualization scrolls to the top of the dashboard container screen, but is not hidden below the header content.

right.mp4

If I replace the line const dashboardContainerTopOffset = dashboardContainerRef?.current?.offsetTop || 0; to const dashboardContainerTopOffset = 0;, it breaks so I guess we're set :)

wrong.mp4

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[Heenawter]

This LGTM! Thanks so much for tackling this 🙇 Fix makes sense to me + tested the Dashboard in fullscreen mode (&_a=(fullScreenMode:true)) + with a banner, and the offset continues to work as expected. Also ensured that renderPanelContents is only called once on load now, which is amazing!!

Just to be sure, I am running a performance test here to see if we can call this a fix for #207011 🎉 The results will take around 3-4 hours, though.