Add loading state functionality to Schedule button in the calendar (#45645)

* Add loading state functionality to Schedule button in the calendar

* Add changelog

* Updated changelog file

packages/js/product-editor/changelog/feature-add-loading-state-to-schedule-button

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Product Editor: Add loading state functionality to Schedule Product modal

packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx

@@ -26,7 +26,7 @@ export function PublishButtonMenu( {
 	postType,
 	...props
 }: PublishButtonMenuProps ) {
-	const { isScheduled, schedule, date, formattedDate } =
+	const { isScheduling, isScheduled, schedule, date, formattedDate } =
 		useProductScheduled( postType );
 	const [ showScheduleModal, setShowScheduleModal ] = useState<
 		'schedule' | 'edit' | undefined
@@ -62,6 +62,7 @@ export function PublishButtonMenu( {
 				<SchedulePublishModal
 					postType={ postType }
 					value={ showScheduleModal === 'edit' ? date : undefined }
+					isScheduling={ isScheduling }
 					onCancel={ () => setShowScheduleModal( undefined ) }
 					onSchedule={ scheduleProduct }
 				/>

packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx

@@ -26,6 +26,7 @@ export function SchedulePublishModal( {
 	className,
 	onCancel,
 	onSchedule,
+	isScheduling,
 	...props
 }: SchedulePublishModalProps ) {
 	const [ date, setDate ] = useState< string | undefined >(
@@ -77,6 +78,8 @@ export function SchedulePublishModal( {
 				</Button>
 				<Button
 					variant="primary"
+					isBusy={ isScheduling }
+					disabled={ isScheduling }
 					onClick={ () => onSchedule?.( date ) }
 				>
 					{ __( 'Schedule', 'woocommerce' ) }

packages/js/product-editor/src/components/schedule-publish-modal/types.ts

@@ -13,4 +13,5 @@ export type SchedulePublishModalProps = Omit<
 	value?: string;
 	onCancel?(): void;
 	onSchedule?( value?: string ): void;
+	isScheduling?: boolean;
 };