Add spinner (loader) to the interactive tasks forms

assets/css/page-widgets/suggested-tasks.css

@@ -206,6 +206,10 @@
 			&.prpl-note-error {
 				color: var(--prpl-color-alert-error-text);
 				background-color: var(--prpl-background-alert-error);
+				margin-bottom: 0;
+
+				order: 98; /* One less than the spinner. */
+				flex-grow: 1;
 
 				.prpl-note-icon {
 					color: var(--prpl-color-alert-error);
@@ -441,10 +445,22 @@
 			padding-top: 1rem;
 			display: flex;
 			justify-content: flex-end;
+			align-items: center;
 			gap: 1rem;
 			align-self: flex-end;
 			width: 100%;
 
+			/* If there are no other elements in the form, align the button to the left. */
+			&:only-child {
+				padding-top: 0;
+				justify-content: flex-start;
+
+				/* Display the spinner after the button. */
+				.prpl-spinner {
+					order: 99;
+				}
+			}
+
 			.prpl-button {
 				cursor: pointer;
 				margin: 0;
@@ -456,6 +472,11 @@
 				}
 			}
 
+			/* Display the spinner before the button. */
+			.prpl-spinner {
+				order: -1;
+			}
+
 		}
 	}
 

assets/js/recommendations/interactive-task.js

@@ -35,6 +35,8 @@ const prplInteractiveTaskFormListener = {
 		formElement.addEventListener( 'submit', ( event ) => {
 			event.preventDefault();
 
+			prplInteractiveTaskFormListener.showLoading( formElement );
+
 			// Get the form data.
 			const formData = new FormData( formElement );
 			const settingsToPass = {};
@@ -56,6 +58,8 @@ const prplInteractiveTaskFormListener = {
 						return response;
 					}
 
+					prplInteractiveTaskFormListener.hideLoading( formElement );
+
 					// This will trigger the celebration event (confetti) as well.
 					prplSuggestedTask.maybeComplete( postId ).then( () => {
 						// Close popover.
@@ -76,6 +80,8 @@ const prplInteractiveTaskFormListener = {
 		const formSubmitHandler = ( event ) => {
 			event.preventDefault();
 
+			prplInteractiveTaskFormListener.showLoading( formElement );
+
 			callback()
 				.then( ( response ) => {
 					if ( true !== response.success ) {
@@ -110,6 +116,9 @@ const prplInteractiveTaskFormListener = {
 					);
 				} )
 				.finally( () => {
+					// Hide loading state.
+					prplInteractiveTaskFormListener.hideLoading( formElement );
+
 					// Remove the form listener once the callback is executed.
 					formElement.removeEventListener(
 						'submit',
@@ -139,6 +148,8 @@ const prplInteractiveTaskFormListener = {
 		formElement.addEventListener( 'submit', ( event ) => {
 			event.preventDefault();
 
+			prplInteractiveTaskFormListener.showLoading( formElement );
+
 			const formData = new FormData( formElement );
 			const settingsToPass = {};
 			settingsToPass[ setting ] = settingCallbackValue(
@@ -157,7 +168,6 @@ const prplInteractiveTaskFormListener = {
 				},
 			} )
 				.then( ( response ) => {
-					console.log( response );
 					if ( true !== response.success ) {
 						// Show error to the user.
 						prplInteractiveTaskFormListener.showError(
@@ -193,6 +203,10 @@ const prplInteractiveTaskFormListener = {
 						error,
 						popoverId
 					);
+				} )
+				.finally( () => {
+					// Hide loading state.
+					prplInteractiveTaskFormListener.hideLoading( formElement );
 				} );
 		} );
 	},
@@ -214,17 +228,12 @@ const prplInteractiveTaskFormListener = {
 
 		console.error( 'Error in interactive task callback:', error );
 
-		// Add error message.
-		const submitButton = formElement.querySelector(
-			'button[type="submit"]'
+		// Check if there's already an error message <p> element right after the form
+		const existingErrorElement = formElement.parentNode.querySelector(
+			'p.prpl-interactive-task-error-message'
 		);
 
-		if (
-			submitButton &&
-			! formElement.querySelector(
-				'.prpl-interactive-task-error-message'
-			)
-		) {
+		if ( ! existingErrorElement ) {
 			// Add paragraph with error message.
 			const errorParagraph = document.createElement( 'p' );
 			errorParagraph.classList.add(
@@ -234,11 +243,57 @@ const prplInteractiveTaskFormListener = {
 			);
 			errorParagraph.textContent = prplL10n( 'somethingWentWrong' );
 
-			// Append before submit button.
-			submitButton.parentNode.insertBefore(
-				errorParagraph,
-				submitButton
+			// Append after the form element.
+			formElement.insertAdjacentElement( 'afterend', errorParagraph );
+		}
+	},
+
+	/**
+	 * Show loading state.
+	 *
+	 * @param {HTMLFormElement} formElement - The form element.
+	 * @return {void}
+	 */
+	showLoading: ( formElement ) => {
+		let submitButton = formElement.querySelector( 'button[type="submit"]' );
+
+		if ( ! submitButton ) {
+			submitButton = formElement.querySelector(
+				'button[data-action="completeTask"]'
 			);
 		}
+
+		submitButton.disabled = true;
+
+		// Add spinner.
+		const spinner = document.createElement( 'span' );
+		spinner.classList.add( 'prpl-spinner' );
+		spinner.innerHTML =
+			'<span class="spinner" style="visibility: visible;"></span>'; // WP spinner.
+
+		// Append spinner after submit button.
+		submitButton.after( spinner );
+	},
+
+	/**
+	 * Hide loading state.
+	 *
+	 * @param {HTMLFormElement} formElement - The form element.
+	 * @return {void}
+	 */
+	hideLoading: ( formElement ) => {
+		let submitButton = formElement.querySelector( 'button[type="submit"]' );
+
+		if ( ! submitButton ) {
+			submitButton = formElement.querySelector(
+				'button[data-action="completeTask"]'
+			);
+		}
+
+		submitButton.disabled = false;
+		const spinner = formElement.querySelector( 'span.prpl-spinner' );
+		if ( spinner ) {
+			spinner.remove();
+		}
 	},
 };

classes/suggested-tasks/providers/class-blog-description.php

@@ -123,9 +123,11 @@ public function print_popover_form_contents() {
 				placeholder="<?php \esc_html_e( 'A catchy phrase to describe your website', 'progress-planner' ); ?>"
 			>
 		</label>
-		<button type="submit" class="prpl-button prpl-button-primary" disabled>
-			<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
-		</button>
+		<div class="prpl-steps-nav-wrapper">
+			<button type="submit" class="prpl-button prpl-button-primary" disabled>
+				<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
+			</button>
+		</div>
 		<?php
 	}
 

classes/suggested-tasks/providers/class-disable-comment-pagination.php

@@ -120,11 +120,7 @@ public function print_popover_instructions() {
 	 * @return void
 	 */
 	public function print_popover_form_contents() {
-		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Disable comment pagination', 'progress-planner' ); ?>
-		</button>
-		<?php
+		$this->print_submit_button( \__( 'Disable comment pagination', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-disable-comments.php

@@ -144,9 +144,11 @@ public function print_popover_instructions() {
 	 */
 	public function print_popover_form_contents() {
 		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Disable new comments', 'progress-planner' ); ?>
-		</button>
+		<div class="prpl-steps-nav-wrapper" style="justify-content: flex-start;margin-bottom: 1.25rem;">
+			<button type="submit" class="prpl-button prpl-button-primary" style="order:-2;">
+				<?php \esc_html_e( 'Disable new comments', 'progress-planner' ); ?>
+			</button>
+		</div>
 		<?php if ( ! \is_multisite() && \current_user_can( 'install_plugins' ) ) : ?>
 			<prpl-install-plugin
 				data-plugin-name="Comment-free zone"

classes/suggested-tasks/providers/class-hello-world.php

@@ -139,11 +139,7 @@ public function should_add_task() {
 	 * @return void
 	 */
 	public function print_popover_form_contents() {
-		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Delete the "Hello World!" post', 'progress-planner' ); ?>
-		</button>
-		<?php
+		$this->print_submit_button( \__( 'Delete the "Hello World!" post', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-permalink-structure.php

@@ -236,10 +236,8 @@ public function print_popover_form_contents() {
 				</div>
 			</fieldset>
 		</div>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Set permalink structure', 'progress-planner' ); ?>
-		</button>
 		<?php
+		$this->print_submit_button( \__( 'Set permalink structure', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-sample-page.php

@@ -138,11 +138,7 @@ public function should_add_task() {
 	 * @return void
 	 */
 	public function print_popover_form_contents() {
-		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Delete the "Sample Page" page', 'progress-planner' ); ?>
-		</button>
-		<?php
+		$this->print_submit_button( \__( 'Delete the "Sample Page" page', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-search-engine-visibility.php

@@ -112,11 +112,7 @@ public function print_popover_instructions() {
 	 * @return void
 	 */
 	public function print_popover_form_contents() {
-		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Allow search engines to index your site', 'progress-planner' ); ?>
-		</button>
-		<?php
+		$this->print_submit_button( \__( 'Allow search engines to index your site', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-select-locale.php

@@ -225,11 +225,8 @@ public function print_popover_form_contents() {
 				'show_available_translations' => \current_user_can( 'install_languages' ) && \wp_can_install_language_pack(),
 			]
 		);
-		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Select locale', 'progress-planner' ); ?>
-		</button>
-		<?php
+
+		$this->print_submit_button( \__( 'Select locale', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-select-timezone.php

@@ -143,10 +143,8 @@ public function print_popover_form_contents() {
 				<?php echo \wp_timezone_choice( $tzstring, \get_user_locale() ); ?>
 			</select>
 		</label>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Set site timezone', 'progress-planner' ); ?>
-		</button>
 		<?php
+		$this->print_submit_button( \__( 'Set site timezone', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-set-date-format.php

@@ -242,10 +242,8 @@ public function print_popover_form_contents() {
 				</p>
 			</fieldset>
 		</div>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Set date format', 'progress-planner' ); ?>
-		</button>
 		<?php
+		$this->print_submit_button( \__( 'Set date format', 'progress-planner' ) );
 	}
 
 	/**

classes/suggested-tasks/providers/class-site-icon.php

@@ -120,9 +120,11 @@ public function print_popover_form_contents() {
 			<?php \esc_html_e( 'Choose or Upload Image', 'progress-planner' ); ?>
 		</button>
 		<input type="hidden" name="site_icon" id="prpl-site-icon-id" value="<?php echo \esc_attr( $site_icon_id ); ?>">
-		<button type="submit" class="prpl-button prpl-button-primary" id="prpl-set-site-icon-button" <?php echo $site_icon_id ? '' : 'disabled'; ?>>
-			<?php \esc_html_e( 'Set site icon', 'progress-planner' ); ?>
-		</button>
+		<div class="prpl-steps-nav-wrapper">
+			<button type="submit" class="prpl-button prpl-button-primary" id="prpl-set-site-icon-button" <?php echo $site_icon_id ? '' : 'disabled'; ?>>
+				<?php \esc_html_e( 'Set site icon', 'progress-planner' ); ?>
+			</button>
+		</div>
 		<?php
 	}
 

classes/suggested-tasks/providers/class-tasks-interactive.php

@@ -206,6 +206,27 @@ public function print_popover_instructions() {
 		echo '<p>' . \wp_kses_post( $description ) . '</p>';
 	}
 
+	/**
+	 * Print the submit button.
+	 *
+	 * @param string $button_text The text for the button.
+	 *                           If empty, the default text "Submit" will be used.
+	 *
+	 * @return void
+	 */
+	protected function print_submit_button( $button_text = '' ) {
+		if ( empty( $button_text ) ) {
+			$button_text = \__( 'Submit', 'progress-planner' );
+		}
+		?>
+		<div class="prpl-steps-nav-wrapper">
+			<button type="submit" class="prpl-button prpl-button-primary">
+				<?php echo \esc_html( $button_text ); ?>
+			</button>
+		</div>
+		<?php
+	}
+
 	/**
 	 * Print the popover form contents.
 	 *

classes/suggested-tasks/providers/class-update-term-description.php

@@ -389,9 +389,11 @@ public function print_popover_form_contents() {
 		></textarea>
 		<input type="hidden" name="term_id" id="prpl-update-term-id" value="">
 		<input type="hidden" name="taxonomy" id="prpl-update-taxonomy" value="">
-		<button type="submit" class="prpl-button prpl-button-primary" id="prpl-update-term-description-button">
-			<?php \esc_html_e( 'Save description', 'progress-planner' ); ?>
-		</button>
+		<div class="prpl-steps-nav-wrapper">
+			<button type="submit" class="prpl-button prpl-button-primary" id="prpl-update-term-description-button">
+				<?php \esc_html_e( 'Save description', 'progress-planner' ); ?>
+			</button>
+		</div>
 		<?php
 	}
 

classes/suggested-tasks/providers/integrations/aioseo/class-archive-author.php

@@ -135,11 +135,7 @@ public function print_popover_instructions() {
 	 * @return void
 	 */
 	public function print_popover_form_contents() {
-		?>
-		<button type="submit" class="prpl-button prpl-button-primary">
-			<?php \esc_html_e( 'Noindex the author archive', 'progress-planner' ); ?>
-		</button>
-		<?php
+		$this->print_submit_button( \__( 'Noindex the author archive', 'progress-planner' ) );
 	}
 
 	/**