[v10.0.x] Navigation: Fix toolbar actions flickering on mobile

[grafana-delivery-bot]

Backport ff429c9 from #70524

---

What is this feature?

• stops toolbar actions flickering on small screens
  • does this by setting the visibility to false initially and only setting to true once the intersection observer has ran
  • upside: no flickering! 🥳
  • downside: toolbar actions won't render at all until the intersection observer has ran, which will be on the next trip round the event loop. i don't think this is noticeable

before

Screenshare.-.2023-06-22.4_01_46.PM.mp4

after

Screenshare.-.2023-06-22.4_00_33.PM.mp4

Why do we need this feature?

• the flickering is ugly 🤮

Who is this feature for?

• everyone! but mostly people on smaller browser screens (e.g. mobile)

Which issue(s) does this PR fix?:

Fixes #

Special notes for your reviewer:

at some point i'm going to try and extract this logic out from this component into a custom hook, but that's not for this PR 😅

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[ashharrison90]

lgtm bot 🤖