Dashboard loading state UX improvements

[RobertJoonas]

Changes

• Enable the fade-in animation when switching between IndexBreakdown tabs (e.g. Sources -> Channels) -- done by passing a key={selectedTabKey} to the IndexBreakdown components
  • Note: the animation does not trigger when changing dashboard state to something that has already been visited (i.e. the results are cached)
• WorldMap component improvements
  • initital state (data is fetching) -- render loading spinner instead of blank world map without colors
  • wrap with LazyLoader like any other IndexBreakdown (fetches data only after scrolled into view)
  • add fade-in animation when transitioning from loading -> data (or showing cached results after tab change) -- basically do the same as IndexBreakdowns
  • code organization: separate SVG rendering into a new component (world-map-svg.tsx) that assumes the presence of data

Tests

• This PR does not require tests

Changelog

• This PR does not make a user-facing change

Documentation

• This change does not need a documentation update

Dark mode

• The UI has been tested both in dark and light mode

[github-actions]

Preview environment👷🏼‍♀️🏗️
PR-6480

[apata]

question: Why must the world map flash in and out whenever the user is doing something on the dashboard? Is it to indicate we're actually working on their new selection? Can we find a cheaper, less disruptive way to indicate that? By cheaper, I mean less work for the browser. By less disruptive, I mean something that's changing less things on the dashboard at once. The map itself flashing in and out is, in my view, a step backward.

As I see it, the world map with country outlines is constant (at least in dashboard timescales). The previous implementation took pains to respect that and to just fade paint according to the current data.

With dummy.site where the autogenerated visitors are spread between very few locations, this fade wasn't very noticeable, but on real sites, it seems the variety of visitor locations guarantees a noticeable change in the map when filters are changed.

[RobertJoonas]

Why must the world map flash in and out whenever the user is doing something on the dashboard? Is it to indicate we're actually working on their new selection?

Yeah, and also just trying to make the UX consistent. It feels strange when you apply a filter and the whole dashboard reacts to that change with loading spinners all around (including the graph container), but the map stays intact. Sometimes, there's not even any notable change in the colors and the report just looks frozen.

Can we find a cheaper, less disruptive way to indicate that? By cheaper, I mean less work for the browser. By less disruptive, I mean something that's changing less things on the dashboard at once. The map itself flashing in and out is, in my view, a step backward.

Yeah, I see how it feels a bit like stepping backwards. But perhaps for the sake of consistency, it's acceptable for the time being?

Letting the SVGs (both map and the main graph) stay mounted throughout the loading state is definitely an idea worth pursuing -- I can see the potential to make the loading state look really nice, but only if we get rid of the loading spinners altogether. For the rest of the dashboard (i.e. IndexBreakdowns) we should probably run some animations from old (placeholder) data to new, fresh data. There's also the question of the initial load where we'd most likely have to introduce some silhouettes. I believe @sanne-san had something sketched out already.

Doing all that sounds quite tricky and I don't think this will be worked on any time soon. Therefore proposing this small step backwards in pursuit of consistency.

Re: browser performance, I believe it used to work like this in the past for a long time without any issues. Do you see it as a blocker @apata?