Refactor settings Save button loading state

[jimmymadon]

Feature Description

As per this internal Slack conversation, the following code snippet can be refactored. The resolution map should be removed from the generic Footer component and each module should implement its own selector to determine which selector should be resolved in order to determine whether it's settings have loaded or not.

site-kit-wp/assets/js/components/settings/SettingsActiveModule/Footer.js

Lines 147 to 169 in f9a0480

	// Check if the resolution for the specified selector has finished.
	// This allows us to determine if the data needed by the module is still being loaded.
	// The primary reason for this loading check is to disable the submit button
	// while the necessary data for the settings is still being loaded, preventing
	// premature interactions by the user.
	const isLoading = useSelect( ( select ) => {
	const resolutionMapping = {
	analytics: 'getAccountSummaries',
	tagmanager: 'getAccounts',
	'search-console': 'getMatchedProperties',
	};
	const resolutionSelector = resolutionMapping[ slug ];
	if ( ! module || ! resolutionSelector ) {
	return false;
	}
	const storeName = module.storeName;
	return ! select( storeName ).hasFinishedResolution(
	resolutionSelector
	);
	} );

---

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

Acceptance criteria

• The code that determines the loading state within each module's settings footer (assets/js/components/settings/SettingsActiveModule/Footer.js) should be refactored so that:
  • Each module itself should implement its own selector which determines whether the module's settings would have been loaded or not. This information should then be used directly within this <Footer> component.

Implementation Brief

• In assets/js/googlesitekit/modules/datastore/settings.js, add a new selector, isSettingsLoading. Similar to isDoingSubmitChanges, it should fetch the module datastore from the slug provided and call the selector of the same name from the individual module's datastore. Similarly, if the correct module-slugh or selector doesn't exist, it should just return false.
• In assets/js/modules/analytics-4/datastore/settings.js, assets/js/modules/tagmanager/datastore/settings.js and assets/js/modules/search-console/datastore/settings.js, add a new selector that checks if the appropriate selector based on the resolutionMapping in assets/js/components/settings/SettingsActiveModule/Footer.js has finished resolution.

Test Coverage

• Add tests for the new selectors similar to the tests for isDoingSubmitChanges().

QA Brief

Changelog entry

[tofumatt]

Works for me 👍🏻

I see there's an IB here already that looks good, so moving this one right to the backlog 😄

IB ✅