From c31f8b0aa51995303ad89a313d80c74585bcd21e Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Tue, 27 Sep 2022 16:26:22 +0800
Subject: [PATCH] Fix industry options not populate after reloading page
 (#34847)

* Add a spinner loader to ensure Industry loaded after data fetched

* Add changelog

Fix style
---
 .../client/profile-wizard/steps/industry.js   | 34 ++++++++++++++++---
 .../fix-34765-industry-reloading-page         |  4 +++
 2 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-34765-industry-reloading-page

diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js b/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js
index f869bb4e16a..2699da477b6 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js
@@ -9,6 +9,7 @@ import {
 	CardBody,
 	CardFooter,
 	CheckboxControl,
+	Spinner,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { filter, find, findIndex, get } from 'lodash';
@@ -26,6 +27,21 @@ import { getAdminSetting } from '~/utils/admin-settings';
 
 const onboarding = getAdminSetting( 'onboarding', {} );
 
+const Loader = ( props ) => {
+	if ( props.isLoading ) {
+		return (
+			<div
+				className="woocommerce-admin__industry__spinner"
+				style={ { textAlign: 'center' } }
+			>
+				<Spinner />
+			</div>
+		);
+	}
+
+	return <Industry { ...props } />;
+};
+
 class Industry extends Component {
 	constructor( props ) {
 		const profileItems = get( props, 'profileItems', {} );
@@ -287,9 +303,16 @@ class Industry extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getProfileItems, getOnboardingError, isOnboardingRequesting } =
-			select( ONBOARDING_STORE_NAME );
-		const { getSettings } = select( SETTINGS_STORE_NAME );
+		const {
+			getProfileItems,
+			getOnboardingError,
+			isOnboardingRequesting,
+			hasFinishedResolution: hasOnboardingFinishedResolution,
+		} = select( ONBOARDING_STORE_NAME );
+		const {
+			getSettings,
+			hasFinishedResolution: hasSettingsFinishedResolution,
+		} = select( SETTINGS_STORE_NAME );
 		const { general: locationSettings = {} } = getSettings( 'general' );
 
 		return {
@@ -298,6 +321,9 @@ export default compose(
 			locationSettings,
 			isProfileItemsRequesting:
 				isOnboardingRequesting( 'updateProfileItems' ),
+			isLoading:
+				! hasOnboardingFinishedResolution( 'getProfileItems', [] ) ||
+				! hasSettingsFinishedResolution( 'getSettings', [ 'general' ] ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
@@ -309,4 +335,4 @@ export default compose(
 			updateProfileItems,
 		};
 	} )
-)( Industry );
+)( Loader );
diff --git a/plugins/woocommerce/changelog/fix-34765-industry-reloading-page b/plugins/woocommerce/changelog/fix-34765-industry-reloading-page
new file mode 100644
index 00000000000..4880cc987e4
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-34765-industry-reloading-page
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix "Industry" options fails to save in the Industry step after reloading the page for OBW