From 6f8bce8bb0c116849e68efab6e3d077ee15accba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Wed, 29 May 2024 19:59:24 +0100
Subject: [PATCH] Product Block Editor: load and create shipping classes
 optimistically  (#47848)

* define ans use shippingClassRequestQuery

* do not invalidate getProductShippingClasses

* changelog
---
 ...ate-create-shipping-classes-optimistically |  4 ++++
 .../product-fields/shipping-class/edit.tsx    | 20 +++++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 packages/js/product-editor/changelog/update-create-shipping-classes-optimistically

diff --git a/packages/js/product-editor/changelog/update-create-shipping-classes-optimistically b/packages/js/product-editor/changelog/update-create-shipping-classes-optimistically
new file mode 100644
index 00000000000..93ba465aaea
--- /dev/null
+++ b/packages/js/product-editor/changelog/update-create-shipping-classes-optimistically
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Block Editor: load and create shipping classes optimistically
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx
index e341242fee1..b9b9f8525ae 100644
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx
@@ -51,6 +51,11 @@ function mapShippingClassToSelectOption(
 	} ) );
 }
 
+/*
+ * Query to fetch shipping classes.
+ */
+const shippingClassRequestQuery = {};
+
 function extractDefaultShippingClassFromProduct(
 	categories?: PartialProduct[ 'categories' ],
 	shippingClasses?: ProductShippingClass[]
@@ -78,7 +83,7 @@ export function Edit( {
 
 	const blockProps = useWooBlockProps( attributes );
 
-	const { createProductShippingClass, invalidateResolution } = useDispatch(
+	const { createProductShippingClass } = useDispatch(
 		EXPERIMENTAL_PRODUCT_SHIPPING_CLASSES_STORE_NAME
 	);
 
@@ -130,9 +135,9 @@ export function Edit( {
 			return {
 				shippingClasses:
 					( isInSelectedTab &&
-						getProductShippingClasses<
-							ProductShippingClass[]
-						>() ) ||
+						getProductShippingClasses< ProductShippingClass[] >(
+							shippingClassRequestQuery
+						) ) ||
 					[],
 			};
 		},
@@ -214,14 +219,13 @@ export function Edit( {
 					onAdd={ ( shippingClassValues ) =>
 						createProductShippingClass<
 							Promise< ProductShippingClass >
-						>( shippingClassValues )
+						>( shippingClassValues, {
+							optimisticQueryUpdate: shippingClassRequestQuery,
+						} )
 							.then( ( value ) => {
 								recordEvent(
 									'product_new_shipping_class_modal_add_button_click'
 								);
-								invalidateResolution(
-									'getProductShippingClasses'
-								);
 								setShippingClass( value.slug );
 								return value;
 							} )