Merge pull request #6381 from google/enhancement/6323-simplify-submit…

…ting-user-input Simplify in-progress state when submitting User Input answers.
google · Jan 13, 2023 · 387f86f · 387f86f
2 parents cd3eb94 + 2857a24
commit 387f86f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 31 deletions.
diff --git a/assets/js/components/user-input/CancelUserInputButton.js b/assets/js/components/user-input/CancelUserInputButton.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * WordPress dependencies
  */
@@ -30,7 +35,7 @@ import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants'
 import Link from '../Link';
 const { useSelect, useDispatch } = Data;
 
-export default function CancelUserInputButton() {
+export default function CancelUserInputButton( { disabled } ) {
 	const dashboardURL = useSelect( ( select ) =>
 		select( CORE_SITE ).getAdminURL( 'googlesitekit-dashboard' )
 	);
@@ -41,8 +46,13 @@ export default function CancelUserInputButton() {
 		<Link
 			className="googlesitekit-user-input__buttons--cancel"
 			onClick={ () => navigateTo( dashboardURL ) }
+			disabled={ disabled }
 		>
 			{ __( 'Cancel', 'google-site-kit' ) }
 		</Link>
 	);
 }
+
+CancelUserInputButton.propTypes = {
+	disabled: PropTypes.bool,
+};
diff --git a/assets/js/components/user-input/UserInputPreview.js b/assets/js/components/user-input/UserInputPreview.js
@@ -31,8 +31,9 @@ import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { Button, ProgressBar } from 'googlesitekit-components';
+import { ProgressBar } from 'googlesitekit-components';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
 import {
 	getUserInputAnswers,
 	USER_INPUT_QUESTIONS_GOALS,
@@ -41,6 +42,7 @@ import {
 	USER_INPUT_QUESTIONS_LIST,
 	USER_INPUT_MAX_ANSWERS,
 } from './util/constants';
+import SpinnerButton from '../SpinnerButton';
 import UserInputPreviewGroup from './UserInputPreviewGroup';
 import UserInputQuestionNotice from './UserInputQuestionNotice';
 import useQueryArg from '../../hooks/useQueryArg';
@@ -56,6 +58,14 @@ export default function UserInputPreview( props ) {
 	const settings = useSelect( ( select ) =>
 		select( CORE_USER ).getUserInputSettings()
 	);
+	const isSavingSettings = useSelect( ( select ) =>
+		select( CORE_USER ).isSavingUserInputSettings( settings )
+	);
+	const isNavigating = useSelect( ( select ) =>
+		select( CORE_LOCATION ).isNavigating()
+	);
+	const isScreenLoading = isSavingSettings || isNavigating;
+
 	const {
 		USER_INPUT_ANSWERS_PURPOSE,
 		USER_INPUT_ANSWERS_POST_FREQUENCY,
@@ -178,21 +188,26 @@ export default function UserInputPreview( props ) {
 					</div>
 					<div className="googlesitekit-user-input__footer googlesitekit-user-input__buttons">
 						<div className="googlesitekit-user-input__footer-nav">
-							<Button
+							<SpinnerButton
 								className="googlesitekit-user-input__buttons--next"
 								onClick={ onSaveClick }
+								disabled={ isScreenLoading }
+								isSaving={ isScreenLoading }
 							>
 								{ __( 'Save', 'google-site-kit' ) }
-							</Button>
+							</SpinnerButton>
 							<Link
 								className="googlesitekit-user-input__buttons--back"
 								onClick={ goBack }
+								disabled={ isScreenLoading }
 							>
 								{ __( 'Back', 'google-site-kit' ) }
 							</Link>
 						</div>
 						<div className="googlesitekit-user-input__footer-cancel">
-							<CancelUserInputButton />
+							<CancelUserInputButton
+								disabled={ isScreenLoading }
+							/>
 						</div>
 					</div>
 				</Fragment>

diff --git a/assets/js/components/user-input/UserInputQuestionnaire.js b/assets/js/components/user-input/UserInputQuestionnaire.js
@@ -19,7 +19,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, Fragment, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -42,7 +42,6 @@ import useQueryArg from '../../hooks/useQueryArg';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
-import { Cell, Row } from '../../material-components';
 import { trackEvent } from '../../util';
 import useViewContext from '../../hooks/useViewContext';
 const { useSelect, useDispatch } = Data;
@@ -65,19 +64,10 @@ export default function UserInputQuestionnaire() {
 	const { saveUserInputSettings } = useDispatch( CORE_USER );
 	const { navigateTo } = useDispatch( CORE_LOCATION );
 
-	const isNavigating = useSelect( ( select ) =>
-		select( CORE_LOCATION ).isNavigating()
-	);
 	const dashboardURL = useSelect( ( select ) =>
 		select( CORE_SITE ).getAdminURL( 'googlesitekit-dashboard' )
 	);
-	const isSavingSettings = useSelect( ( select ) => {
-		const userInputSettings = select( CORE_USER ).getUserInputSettings();
 
-		return select( CORE_USER ).isSavingUserInputSettings(
-			userInputSettings
-		);
-	} );
 	const error = useSelect( ( select ) =>
 		select( CORE_USER ).getErrorForAction( 'saveUserInputSettings', [] )
 	);
@@ -172,21 +162,6 @@ export default function UserInputQuestionnaire() {
 		/>
 	);
 
-	if ( isSavingSettings || isNavigating ) {
-		return (
-			<Fragment>
-				{ settingsProgress }
-				<div className="googlesitekit-user-input__preview googlesitekit-user-input__preview-loading">
-					<Row>
-						<Cell lgSize={ 12 } mdSize={ 8 } smSize={ 4 }>
-							<ProgressBar />
-						</Cell>
-					</Row>
-				</div>
-			</Fragment>
-		);
-	}
-
 	return (
 		<div>
 			{ settingsProgress }

diff --git a/assets/js/components/user-input/UserInputSelectOptions.js b/assets/js/components/user-input/UserInputSelectOptions.js
@@ -34,6 +34,7 @@ import { sprintf, _n } from '@wordpress/i18n';
 import Data from 'googlesitekit-data';
 import { Checkbox, Radio } from 'googlesitekit-components';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
 import { Cell } from '../../material-components';
 const { useSelect, useDispatch } = Data;
 
@@ -48,6 +49,12 @@ export default function UserInputSelectOptions( {
 	const values = useSelect(
 		( select ) => select( CORE_USER ).getUserInputSetting( slug ) || []
 	);
+	const isSavingSettings = useSelect( ( select ) =>
+		select( CORE_USER ).isSavingUserInputSettings( values )
+	);
+	const isNavigating = useSelect( ( select ) =>
+		select( CORE_LOCATION ).isNavigating()
+	);
 	const { setUserInputSetting } = useDispatch( CORE_USER );
 	const optionsRef = useRef();
 
@@ -137,6 +144,10 @@ export default function UserInputSelectOptions( {
 			props.name = slug;
 		}
 
+		if ( isSavingSettings || isNavigating ) {
+			props.disabled = true;
+		}
+
 		return (
 			<div
 				key={ optionSlug }