feat: implement loading spinner [DHIS2-20124]

[edoardo]

Implements DHIS2-20124

Description

Implement a loading spinner in the PluginWrapper component.
This spinner shows while a visualization is fetched (opened via StartScreen, File -> Open or by changing the URL) and while the analytics data for such visualization is fetched.

There are different scenarios depending on the presence of a (previous) visualization object in the Redux store (currentVis).
If currentVis is present (ie. I'm looking at a visualization and decide to switch to another one) the LL/PT plugin is rendered in addition to the loading spinner. In this case, when analytics data is not available, the plugin returns null, otherwise the (previous) visualization is rendered but covered by the spinner.
If currentVis is not present, is not possible to render the specific plugin, because we don't know which one to use (we need visualization.type). In this case only the spinner is rendered.
Once the visualization fetch is completed, the isVisualizationLoading flag is set to false.
This partially controls the visibility of the spinner.
The spinner keeps remaining visible until the analytics data is returned, the hasAnalyticsData internal state flag is used for this.
This spinner is then only visible when fetching a visualization from the server.

Another scenario is when a visualization is loaded but changes are made and the Update button is clicked.
In this case the currentVis changes, but there isn't any visualization fetch, isVisualizationLoading remains unchanged and the spinner is not shown.
The visualization plugin (LL, PT...) renders the fetch overlay, which shows a spinner on top of the visualization while the new analytics data is fetched.

Similarly, when sorting or paginating the fetch overlay is shown while the new analytics data is fetched.

For all this to work, we need some information passed to the plugin components.

isVisualizationLoading comes either from the app's Redux store or from the local state in the dashboard plugin.
The other flag needed ishasAnalyticsData implemented as local state in PluginWrapper.
This flag is used to control spinner between the visualization fetch and the analytics fetch when there is a "time gap" before the plugin components can render something.

The fetch overlay has also been adjusted to blur the table content instead of showing the dark grey background.

---

Quality checklist

Add N/A to items that are not applicable and check them.

• Dashboard tested
• Cypress and/or Jest tests added/updated
• Docs added N/A
• d2-ci dependency replaced (requires https://github.com/dhis2/analytics/pull/XXX) N/A

---

TODO

• decide if the blurring effect should cover the whole table including the headers and the pagination controls. The fetch overlay still covers the whole table, so interaction with pagination and sorting buttons is blocked while analytics data is fetched.

---

Known issues

• a double analytics fetch happens, this might be only in dev mode, but it needs to be avoided Solved by calling the analytics fetch "manually", the hook now returns a function instead of performing the fetch directly.

---

Screenshots

Main spinner when loading a visualization and waiting for analytics data to return:

Fetch overlay shown when sorting/paginating or updating a visualization when editing:

[dhis2-bot]

🚀 Deployed on https://pr-74.event-visualizer.netlify.dhis2.org

[HendrikThePendric]

I think there are still some minor points to address, but in general I think the solution you are working towards seems perfect. You've found an elegant way to differentiate between the "clear data and reload" and the "fetch new data" scenario in a very elegant way 💪

[HendrikThePendric]

🎉