[Product Block Editor]: add loading for the `Choose products for me` button (#43656)

* store is loading when chossing products for me

* disable choose btn when it's loading

* changelog

* restore is busy animation styles when disables

* restore changes

* fiox rebase issue

* restore disabling button

packages/js/product-editor/changelog/update-roduct-editor-add-choose-buttton-loading-state

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: add loading for the `Choose products for me` button

packages/js/product-editor/src/blocks/generic/linked-product-list/edit.tsx

@@ -6,6 +6,7 @@ import {
 	useCallback,
 	useEffect,
 	useReducer,
+	useState,
 } from '@wordpress/element';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { Product } from '@woocommerce/data';
@@ -130,6 +131,8 @@ export function LinkedProductListBlockEdit( {
 		setLinkedProductIds( newLinkedProductIds );
 	}
 
+	const [ isChoosingProducts, setIsChoosingProducts ] = useState( false );
+
 	async function chooseProductsForMe() {
 		dispatch( {
 			type: 'LOADING_LINKED_PRODUCTS',
@@ -138,6 +141,8 @@ export function LinkedProductListBlockEdit( {
 			},
 		} );
 
+		setIsChoosingProducts( true );
+
 		const relatedProducts = ( await getRelatedProducts( productId, {
 			fallbackToRandomProducts: true,
 		} ) ) as Product[];
@@ -149,6 +154,8 @@ export function LinkedProductListBlockEdit( {
 			},
 		} );
 
+		setIsChoosingProducts( false );
+
 		if ( ! relatedProducts ) {
 			return;
 		}
@@ -168,6 +175,8 @@ export function LinkedProductListBlockEdit( {
 					variant="tertiary"
 					icon={ reusableBlock }
 					onClick={ chooseProductsForMe }
+					isBusy={ isChoosingProducts }
+					disabled={ isChoosingProducts }
 				>
 					{ __( 'Choose products for me', 'woocommerce' ) }
 				</Button>

packages/js/product-editor/src/blocks/generic/section/editor.scss

@@ -64,10 +64,22 @@
 		max-width: 300px;
 	}
 
+	// <ActionSections /> slot.
 	&__actions {
 		display: flex;
 		justify-content: flex-end;
 		gap: $grid-unit;
+
+		/*
+		 * Core removes the "loading" animation styles
+		 * from the button when it's disabled, so we
+		 * let's add them back.
+		 */ 
+		.components-button.is-tertiary.is-busy:disabled {
+			background-image: linear-gradient( -45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0 );
+			background-size: 100px 100%;
+			opacity: 1;
+		}
 	}
 }