UX/UI issue on graphs when in Gathering Data state

Bug Description

While testing #4697 I noticed an odd UX/UI behaviour. The gathering data… loads slightly early when the loading animation is running for the graphs i.e. All traffic and Search Traffic widgets. See note from Asvin on 4697 re. needing further investigation. Screencast here (this is on entity, but is the same on main dashboard).

https://user-images.githubusercontent.com/73545194/158388495-73bab717-e439-48db-8e2e-75cfb4788058.mp4

The same issue occurs on any graphs on module pages.

Steps to reproduce

1. Enable zeroDataStates feature flag on the tester plugin.
2. Make sure you force data to ‘Gathering’ for search console and analytics.
3. Go to the Site Kit dashboard and observe details above.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The “gathering data” overlay for any Google charts should load at the same time as the charts itself.
  • This may need to rely on some sort of “loaded” callback/hook from the charts JS library in order to work. If that does not exist or is otherwise infeasible, we will have to research another approach.

Implementation Brief

Update react-google-charts version

• Update NPM dependency react-google-charts to version 4.0.0, which provides the onLoad prop.

Fix the chart

• In the GoogleChart component, pass the onLoad prop to the Chart component.
• The onLoad callback should set some local component state, e.g. isChartLoaded.
• Add isChartLoaded to the condition to render GatheringDataNotice. https://github.com/google/site-kit-wp/blob/3532d36abc6e50f61b7ce7aa63a0499a319b3a8f/assets/js/components/GoogleChart.js#L263-L264

Fix Storybook

• The new react-google-charts version will break Storybook stories which display charts.
• Removing the script tag that loads https://www.gstatic.com/charts/loader.js in .storybook/preview-head.html appears to fix it. https://github.com/google/site-kit-wp/blob/3532d36abc6e50f61b7ce7aa63a0499a319b3a8f/.storybook/preview-head.html#L15
• Apply this fix, and ensure that all stories are fixed.
• Ensure the VRT suite passes.

Test Coverage

• No new tests needed.

QA Brief

• Follow the Steps to reproduce in the Bug Description.
• Verify the “gathering data” notice appears in sync with the chart loading.
• Check that Storybook stories with charts are still working, e.g.
  • Line chart: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/adsense-module-components-module-overview-widget--loaded
  • Line chart in DataBlock Sparkline: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/adsense-module-components-dashboard-summary-widget--loaded
  • Line & pie charts: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-components-dashboard-all-traffic-widget--loaded

Changelog entry

• Fix gathering data message appearing too early on chart components.

[felixarntz]

@wpdarren @techanvil @aaemnnosttv Thanks for catching and looking into this. Since it’s in the release and we don’t have much time left on the investigation, I’d suggest we cap this on Monday (somewhere around end of day Europe, start of the day US) if not completed by then and make a decision.

I’m a bit wary about the React chart update causing potentially further problems, as it has been a recurring issue for us that these updates haven’t been exactly smooth several times. Unless we’re confident this update isn’t causing other issues, I’d prefer reverting this from the main release branch and putting it back into develop instead to give it more time for testing. The original problem that this issue solves is not severe enough to “justify” potential breakage.

[aaemnnosttv]

@techanvil would you please open a PR with your suggested workaround?

Worst case, we will revert this issue back and punt it to a future release.