Update task list items to show spinner on selection (#39270)

* Update task list to show a spinner on item click

There is an issue of a noticeable delay when clicking on product task list items, which leaves users waiting without any indication of the loading status.
To enhance the user experience, add a loading spinner that provides visual feedback during the transition to the next page.

Co-authored-by: yashita.mittal <yashita.mittal@a8c.com>

plugins/woocommerce-admin/client/task-lists/fills/import-products/index.tsx

@@ -51,7 +51,7 @@ export const Products = () => {
 			),
 		} );
 
-	const productTypeListItems = useProductTypeListItems(
+	const { productTypes: productTypeListItems } = useProductTypeListItems(
 		getProductTypes( {
 			exclude: [ 'subscription' ],
 		} ),

plugins/woocommerce-admin/client/task-lists/fills/products/index.tsx

@@ -12,6 +12,7 @@ import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
 import { recordEvent } from '@woocommerce/tracks';
 import { SETTINGS_STORE_NAME } from '@woocommerce/data';
 import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -52,6 +53,7 @@ const ViewControlButton: React.FC< {
 
 export const Products = () => {
 	const [ isExpanded, setIsExpanded ] = useState< boolean >( false );
+
 	const [
 		isConfirmingLoadSampleProducts,
 		setIsConfirmingLoadSampleProducts,
@@ -75,7 +77,7 @@ export const Products = () => {
 		getOnboardingProductType()
 	);
 
-	const productTypes = useProductTypeListItems(
+	const { productTypes, isRequesting } = useProductTypeListItems(
 		// Subscriptions only in the US
 		getProductTypes( {
 			exclude: isStoreInUS ? [] : [ 'subscription' ],
@@ -136,6 +138,7 @@ export const Products = () => {
 						setIsConfirmingLoadSampleProducts( true )
 					}
 					showOtherOptions={ isExpanded }
+					isTaskListItemClicked={ isRequesting }
 				/>
 				<ViewControlButton
 					isExpanded={ isExpanded }

plugins/woocommerce-admin/client/task-lists/fills/products/stack.scss

@@ -1,5 +1,6 @@
 .woocommerce-products-stack {
 	width: 550px;
+	position: relative;
 
 	@media (max-width: 550px ) {
 		& {
@@ -39,6 +40,9 @@
 				display: none;
 			}
 		}
+		&:first-child {
+			margin-top: 0;
+		}
 	}
 
 	.woocommerce-list__item-inner {
@@ -79,4 +83,22 @@
 		color: $gray-700;
 		line-height: 16px;
 	}
+
+	.woocommerce-stack__overlay-spinner {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, 0.8);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 999;
+
+		.list-overlay {
+			position: relative;
+		}
+	}
+
 }

plugins/woocommerce-admin/client/task-lists/fills/products/stack.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { List, Link } from '@woocommerce/components';
+import { List, Link, Spinner } from '@woocommerce/components';
 import { Text } from '@woocommerce/experimental';
 import interpolateComponents from '@automattic/interpolate-components';
 import { getAdminLink } from '@woocommerce/settings';
@@ -21,17 +21,24 @@ type StackProps = {
 	} )[];
 	onClickLoadSampleProduct: () => void;
 	showOtherOptions?: boolean;
+	isTaskListItemClicked?: boolean;
 };
 
 const Stack: React.FC< StackProps > = ( {
 	items,
 	onClickLoadSampleProduct,
 	showOtherOptions = true,
+	isTaskListItemClicked = false,
 } ) => {
 	const { recordCompletionTime } = useRecordCompletionTime( 'products' );
 
 	return (
 		<div className="woocommerce-products-stack">
+			{ isTaskListItemClicked && (
+				<div className="woocommerce-stack__overlay-spinner">
+					<Spinner className="list-overlay" />
+				</div>
+			) }
 			<List items={ items } />
 			{ showOtherOptions && (
 				<Text className="woocommerce-stack__other-options">

plugins/woocommerce-admin/client/task-lists/fills/products/use-create-product-by-type.ts

@@ -65,9 +65,9 @@ export const useCreateProductByType = () => {
 					`post.php?post=${ data.id }&action=edit&wc_onboarding_active_task=products&tutorial=true`
 				);
 				window.location.href = link;
-			} else {
-				throw new Error( 'Unexpected empty data response from server' );
+				return;
 			}
+			throw new Error( 'Unexpected empty data response from server' );
 		} catch ( error ) {
 			createNoticesFromResponse( error );
 		}

plugins/woocommerce-admin/client/task-lists/fills/products/use-product-types-list-items.tsx

@@ -19,7 +19,7 @@ const useProductTypeListItems = (
 		onClick?: () => void;
 	} = {}
 ) => {
-	const { createProductByType } = useCreateProductByType();
+	const { createProductByType, isRequesting } = useCreateProductByType();
 
 	const productTypes = useMemo(
 		() =>
@@ -44,7 +44,7 @@ const useProductTypeListItems = (
 		[ createProductByType ]
 	);
 
-	return productTypes;
+	return { productTypes, isRequesting };
 };
 
 export default useProductTypeListItems;

plugins/woocommerce/changelog/update-36510-spinner-in-task-list

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update task list to show a spinner on item click