Create AdSense account screen pops up after briefly being blank

[felixarntz]

Follow-up to #4758 and #4762: There are two problems from the implementation that I just spotted:

• When you have no account, it can happen that after the loader ProgressBar disappears, the screen remains blank for a split second before showing the UI to create a new account.
• The Storybook story to select account is broken, it just shows a loader: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-adsense-components-setup-v2-setupmain--select-account

---

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

Acceptance criteria

• The AdSense V2 SetupMain component should ensure that any data needed for its sub-components to render at all is loaded before rendering any of the sub-components.
  • In other words, the condition to show the ProgressBar needs to be extended, for example to also wait until the existing tag detection has completed.
• The AdSense V2 components SetupCreateAccount, SetupAccountPendingTasks, and SetupAccountCreateSite should never return null. Instead, they should be adjusted so that only the UI pieces that require the specific data to be loaded are not rendered until they are loaded.
• The Storybook story in https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-adsense-components-setup-v2-setupmain--select-account should be fixed to display the actual UI instead of a loading state.

Implementation Brief

• Add === undefined (eg. "is loading") checks at

  site-kit-wp/assets/js/modules/adsense/components/setup/v2/SetupMain.js

  Line 255 in 068e497

  if ( accounts === undefined ) {

  for:
  • accountStatus
  • siteStatus
  • const existingTag = useSelect( ( select ) => select( MODULES_ADSENSE ).getExistingTag() );
  • it's possible more checks are needed, this isn't an exhaustive list, but is at least a good starting point. Once the bug mentioned at the top of the issue is resolved (and the storybook story mentioned in the ACs is fixed) we should be good 🙂
• Remove

  site-kit-wp/assets/js/modules/adsense/components/setup/v2/SetupCreateAccount.js

  Lines 72 to 74 in 068e497

  	if ( ! siteURL || ! userEmail || undefined === existingTag ) {
  	return null;
  	}

  /

  site-kit-wp/assets/js/modules/adsense/components/setup/v2/SetupAccountPendingTasks.js

  Lines 52 to 54 in 068e497

  	if ( ! accountID || ! serviceAccountURL ) {
  	return null;
  	}

  /

  site-kit-wp/assets/js/modules/adsense/components/setup/v2/SetupAccountCreateSite.js

  Lines 56 to 58 in 068e497

  	if ( ! accountID || addSiteURL === undefined ) {
  	return null;
  	}

  and add conditional rendering of any element inside the main return value of each component to be dependent on values inside it.

Test Coverage

• No new tests are needed, but the Storybook story in the ACs should be fixed.

QA Brief

• Verify that when you have no account, there are no blank screens shown for a short period of time after the progress bar disappears.

Changelog entry

• Fix AdSense error message when user does not have an AdSense account.

[felixarntz]

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• The Storybook story loads with as expected.
• When you have no account, there are no blank screens shown for a short period of time after the progress bar disappears.

ads-1.mp4