Skip to content

Add spinner (loader) to the interactive tasks forms #685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 27, 2025
Merged

Add spinner (loader) to the interactive tasks forms #685

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
94668b4
add spinner to the interactive tasks
ilicfilip Oct 24, 2025
23af83e
handle integrations, adjust error displaying of error message, add wp…
ilicfilip Oct 24, 2025
1911aa0
fix order for special case
ilicfilip Oct 24, 2025
15d99fb
move submit wrapper & button to common method where possible
ilicfilip Oct 24, 2025
5ec5c5c
Merge branch 'develop' into filip/v19/interactive-tasks-loader
ilicfilip Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions assets/css/page-widgets/suggested-tasks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -456,6 +472,11 @@
}
}

/* Display the spinner before the button. */
.prpl-spinner {
order: -1;
}

}
}

Expand Down
83 changes: 69 additions & 14 deletions assets/js/recommendations/interactive-task.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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.
Expand All @@ -76,6 +80,8 @@ const prplInteractiveTaskFormListener = {
const formSubmitHandler = ( event ) => {
event.preventDefault();

prplInteractiveTaskFormListener.showLoading( formElement );

callback()
.then( ( response ) => {
if ( true !== response.success ) {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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(
Expand All @@ -157,7 +168,6 @@ const prplInteractiveTaskFormListener = {
},
} )
.then( ( response ) => {
console.log( response );
if ( true !== response.success ) {
// Show error to the user.
prplInteractiveTaskFormListener.showError(
Expand Down Expand Up @@ -193,6 +203,10 @@ const prplInteractiveTaskFormListener = {
error,
popoverId
);
} )
.finally( () => {
// Hide loading state.
prplInteractiveTaskFormListener.hideLoading( formElement );
} );
} );
},
Expand All @@ -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(
Expand All @@ -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();
}
},
};
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-blog-description.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-disable-comment-pagination.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,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 comment pagination', 'progress-planner' ); ?>
</button>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Disable comment pagination', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-disable-comments.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-hello-world.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,11 @@ public function should_add_task() {
*/
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>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Delete the "Hello World!" post', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
9 changes: 6 additions & 3 deletions classes/suggested-tasks/providers/class-permalink-structure.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,9 +236,12 @@ 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>

<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Set permalink structure', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-sample-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,11 @@ public function should_add_task() {
*/
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>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Delete the "Sample Page" page', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-search-engine-visibility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,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( 'Allow search engines to index your site', 'progress-planner' ); ?>
</button>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Allow search engines to index your site', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
6 changes: 4 additions & 2 deletions classes/suggested-tasks/providers/class-select-locale.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,9 +226,11 @@ public function print_popover_form_contents() {
]
);
?>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Select locale', 'progress-planner' ); ?>
</button>
<?php \esc_html_e( 'Select locale', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
6 changes: 4 additions & 2 deletions classes/suggested-tasks/providers/class-select-timezone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,11 @@ public function print_popover_form_contents() {
<?php echo \wp_timezone_choice( $tzstring, \get_user_locale() ); ?>
</select>
</label>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Set site timezone', 'progress-planner' ); ?>
</button>
<?php \esc_html_e( 'Set site timezone', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-set-date-format.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,11 @@ 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>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Set date format', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-site-icon.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/class-update-term-description.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
8 changes: 5 additions & 3 deletions classes/suggested-tasks/providers/integrations/aioseo/class-archive-author.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,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( 'Noindex the author archive', 'progress-planner' ); ?>
</button>
<div class="prpl-steps-nav-wrapper">
<button type="submit" class="prpl-button prpl-button-primary">
<?php \esc_html_e( 'Noindex the author archive', 'progress-planner' ); ?>
</button>
</div>
<?php
}

Expand Down
Loading
Loading