site-kit-wp: Tag Manager setup/settings blocks user while container data is loading without loading indicator

Bug Description

It takes a long time (10 seconds plus) for Site Kit to recognize a non Site Kit placed GTM snippet and populate the account and container fields with that manually inserted information. While this may be in relation to a lookup of all Tag Manager accounts during the wait users there are a couple of issues:

1. Users may be uncertain on how to proceed, do they wait or do they exit (there is no loading indicator and the “Confirm and Continue” buttons are greyed out
2. The pre-populated GTM account and container are not necessarily the correct GTM account and container (this should be addressed once #4209 is has been resolved)
3. It only changes to the correct pre-populate data after the wait/lookup

https://recordit.co/IW511jun1l

An improvement for this would be for the field to be not pre-populated and ideally a loading indicator would appear.

Steps to reproduce

1. Insert GTM manually with the code snippet in the head and body of your site
2. Connect GTM within Site Kit. It takes some time for GTM to populate with the correct GTM already connected, in the meantime showing possibly incorrect data

---

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

Acceptance criteria

• The primary loading indicator shown while loading Tag Manager setup or settings-edit views should continue to be shown under the following conditions:
  • The presence of an existing tag is not yet finished resolving
  • An existing tag is present and its permissions check has not finished resolving
• A new loading indicator should be shown to the right of the container selects in the Tag Manager setup and settings views when the live container version is loading
  • It should use the same type of mini progress bar that is used for the compatibility checks which happen on the splash screen, i.e. next to the disabled CTA button. The small text above it should say:

    Checking tags

  • Only a single loading indicator should be shown for this which should show regardless of which container(s) the version data is being fetched for

Implementation Brief

• In assets/js/modules/tagmanager/components/setup/SetupMain.js: and assets/js/modules/tagmanager/components/settings/SettingsEdit.js components:
  • Continue showing the progress bar when hasExistingTag and hasExistingTagPermision is undetermined by expanding the logic that sets the ProgressBar as viewComponent. ie. if ( ... || hasExistingTag === undefined || hasExistingTagPermission === undefined ) { ...
• In assets/js/modules/tagmanager/components/setup/SetupForm.js and assets/js/modules/tagmanager/components/settings/SettingsForm.js:
  • Get the accountID, internalContainerID and internalAMPContainerID using the getAccountID, getInternalContainerID and getInternalAMPContainerID selectors from the MODULES_TAGMANAGER store.
  • Define isResolvingWebGetLiveContainerVersion and isResolvingAMPGetLiveContainerVersion using the isResolving with getLiveContainerVersion as the first argument and array of accountID and internalContainerID / internalAMPContainerID as the second argument of the isResolving selectors respectively. ie.

const isResolvingWebGetLiveContainerVersion = useSelect( ( select ) =>
  select( MODULES_TAGMANAGER ).isResolving( 'getLiveContainerVersion', [
    accountID,
    internalContainerID,
  ] )
);

• Conditionally render a ProgressBar inside the googlesitekit-setup-module__inputs div either of the isResolvingWebGetLiveContainerVersion or isResolvingAMPGetLiveContainerVersion is true. * It should be something like this: https://github.com/google/site-kit-wp/blob/f8b423e14e8e0878db86e4530b11cb8d414d6c1a/assets/js/components/setup/CompatibilityChecks/index.js#L84-L89
  • Use the text from the AC as the label.

Test Coverage

• No changes needed.

QA Brief

QA:Eng

• Create a Google Tag Manager account manually
• Open wp-content/themes/twentytwentyone/header.php file. Make sure you’re on the Twenty Twenty One theme. If not add the scripts respectively.
• Copy the scripts and add it to the <head> and <body> tags respectively
• Go to the Site Kit settings page and connect/setup Tag Manager
• Verify the new loading animation with the text Checking tags… along with the small ProgressBar while the container is loading data. Please refer to the screenshot attached in the PR description.
• Once connected, go the settings connected services and edit the Tag Manager and refresh the page
• Verify the new loading animation with the text Checking tags… along with the small ProgressBar while the container is loading data. (The loader might be visible only on the first time in the setting page)
• Verify the same loading behaviour without an existing tag

Changelog entry

• Update Tag Manager setup and settings edit views with loading indicator while tags are being checked.