Incorrect dashboard notification briefly shows before correct one is loaded

Bug Description

When one module (e.g. Analytics) is gathering data while the other module (e.g. Search Console) has just zero data available, the Site Kit dashboard may briefly flash the notification about the zero data module (Search Console) before showing the notification about the gathering data module (Analytics).

It is expected for the latter to have precedence, so that’s all good, but we should ensure we don’t show the other one first to then replace it. Instead, the components should ensure the necessary data has been loaded for both notifications to determine which one to show before showing any.

To replicate that, configure the modules as described in the first paragraph and load the Site Kit dashboard. You may see the one notification about the zero data module briefly show up before the other one takes over.

From the bug bash asana ticket

---

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

Acceptance criteria

• Before showing the banner notification for either “gathering data” or “zero data”, it must be ensured that all relevant data affecting their conditions has been loaded (i.e. is not undefined).
  • It should no longer be possible for one of the two notifications to briefly pop up just to be replaced by the other one a second later (as the check determining the other one is needed only completed a bit later).

Implementation Brief

• Add === undefined checks for all “gathering data” and “zero data” useSelect results in ZeroDataStateNotifications.js, eg:

if (
	analyticsGatheringData === undefined ||
	searchConsoleGatheringData === undefined ||
	analyticsHasZeroData === undefined ||
	searchConsoleHasZeroData === undefined
) {
	return null;
}

This ensures no notification is shown until all data is ready.

That said, it might also be worth only displaying the zero data notification if “gathering data” is false, given the “gathering data” scenario “takes precedence” over “zero data”, so there’s no sense outputting even the component if gathering data is true.

Test Coverage

• No new tests are needed.

QA Brief

• Ensure zeroDataStates feature flag is enabled.
• Using the tester plugin, enable the gathering data state for Analytics and zero data state for Search Console.
• Clear the session and reload the page.
• Ensure the zero data state notification doesn’t pop up briefly and disappear.
• Ensure the gathering data state notification appears as expected.

Changelog entry

• Fix bug that could cause the incorrect notification to briefly appear when Analytics or Search Console is gathering data.

[aaemnnosttv]

So updating the component not to render both React components, as it currently does, would make sense: 8b0be2c/assets/js/components/notifications/ZeroDataStateNotifications.js#L100-L135

Sure, our notifications system is “smart” enough not to show both, but it’s still needless and might be confusing to a developer because the logic here isn’t what we INTEND to happen.

That makes sense, I missed that it currently rendered both simultaneously (under the right conditions) so that would be good to fix as well 😄

Sorry, I think I’m a bit lost here. Do you mean a hasFinishedResolution for isGatheringData? I mean, we could do that instead of checking for undefined… but the result would be the same I think.

That is what I meant but once #4542 is done undefined will only mean loading so the result would be the same. Not having the internal report args is a bit problematic in a few cases but it isn’t something we need to tackle as part of this issue.

IB ✅

[aaemnnosttv]

@tofumatt I was thinking it might be worth introducing a way to select hasFinishedResolution for isGatheringData (i.e. the internal report) which would apply here too since the two are very similar. There is actually a bug in the implementation because we don’t use these which can cause an infinite loading state in the event of an error in those report requests (see #4542).

That said, it might also be worth only displaying the zero data notification if “gathering data” is false, given the “gathering data” scenario “takes precedence” over “zero data”, so there’s no sense outputting even the component if gathering data is true.

It’s worth noting that hasZeroData selectors use isGatheringData internally so if isGatheringData, hasZeroData will also return true. Not sure checking for gathering data to be false first in ZeroDataStateNotifications would be the right check – can you elaborate on what you mean?

The IB looks good to solve the problem I think but maybe there is an additional guard worth adding in the component like you said.