[Product Block Editor]: always show "loading" state when choosing suggested products (#44053)

* add forceRequest param

* changelog

* force request when getting suggestions for linked

packages/js/product-editor/changelog/update-suggested-products-loading-state

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: always show "loading" state when choosing suggested products

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

@@ -184,6 +184,7 @@ export function LinkedProductListBlockEdit( {
 
 		const linkedProducts = ( await getSuggestedProductsFor( {
 			postId: productId,
+			forceRequest: true,
 		} ) ) as Product[];
 
 		dispatch( {

packages/js/product-editor/src/utils/get-related-products/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { select, resolveSelect } from '@wordpress/data';
+import { select, resolveSelect, dispatch } from '@wordpress/data';
 import { PRODUCTS_STORE_NAME } from '@woocommerce/data';
 import type { Product } from '@woocommerce/data';
 
@@ -72,6 +72,7 @@ export default async function getRelatedProducts(
 type getSuggestedProductsForOptions = {
 	postId: number;
 	postType?: 'product' | 'post' | 'page';
+	forceRequest?: boolean;
 };
 
 /**
@@ -83,6 +84,7 @@ type getSuggestedProductsForOptions = {
 export async function getSuggestedProductsFor( {
 	postId,
 	postType = 'product',
+	forceRequest = false,
 }: getSuggestedProductsForOptions ): Promise< Product[] | undefined > {
 	// @ts-expect-error There are no types for this.
 	const { getEditedEntityRecord } = select( 'core' );
@@ -96,6 +98,13 @@ export async function getSuggestedProductsFor( {
 		tags: data?.tags ? data.tags.map( ( tag ) => tag.id ) : [],
 	};
 
+	if ( forceRequest ) {
+		await dispatch( PRODUCTS_STORE_NAME ).invalidateResolution(
+			'getSuggestedProducts',
+			[ options ]
+		);
+	}
+
 	return await resolveSelect( PRODUCTS_STORE_NAME ).getSuggestedProducts(
 		options
 	);