Skip to content

Commit 94668b4

Browse files
ilicfilipilicfilip
committed
add spinner to the interactive tasks
1 parent 7cb8100 commit 94668b4

14 files changed

Lines changed: 122 additions & 35 deletions

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -441,10 +441,22 @@
441441
padding-top: 1rem;
442442
display: flex;
443443
justify-content: flex-end;
444+
align-items: center;
444445
gap: 1rem;
445446
align-self: flex-end;
446447
width: 100%;
447448

449+
/* If there are no other elements in the form, align the button to the left. */
450+
&:only-child {
451+
padding-top: 0;
452+
justify-content: flex-start;
453+
454+
/* Display the spinner after the button. */
455+
.prpl-spinner {
456+
order: 99;
457+
}
458+
}
459+
448460
.prpl-button {
449461
cursor: pointer;
450462
margin: 0;
@@ -456,6 +468,11 @@
456468
}
457469
}
458470

471+
/* Display the spinner before the button. */
472+
.prpl-spinner {
473+
order: -1;
474+
}
475+
459476
}
460477
}
461478

‎assets/js/recommendations/interactive-task.js‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ const prplInteractiveTaskFormListener = {
3535
formElement.addEventListener( 'submit', ( event ) => {
3636
event.preventDefault();
3737

38+
prplInteractiveTaskFormListener.showLoading( formElement );
39+
3840
// Get the form data.
3941
const formData = new FormData( formElement );
4042
const settingsToPass = {};
@@ -56,6 +58,8 @@ const prplInteractiveTaskFormListener = {
5658
return response;
5759
}
5860

61+
prplInteractiveTaskFormListener.hideLoading( formElement );
62+
5963
// This will trigger the celebration event (confetti) as well.
6064
prplSuggestedTask.maybeComplete( postId ).then( () => {
6165
// Close popover.
@@ -76,6 +80,8 @@ const prplInteractiveTaskFormListener = {
7680
const formSubmitHandler = ( event ) => {
7781
event.preventDefault();
7882

83+
prplInteractiveTaskFormListener.showLoading( formElement );
84+
7985
callback()
8086
.then( ( response ) => {
8187
if ( true !== response.success ) {
@@ -110,6 +116,9 @@ const prplInteractiveTaskFormListener = {
110116
);
111117
} )
112118
.finally( () => {
119+
// Hide loading state.
120+
prplInteractiveTaskFormListener.hideLoading( formElement );
121+
113122
// Remove the form listener once the callback is executed.
114123
formElement.removeEventListener(
115124
'submit',
@@ -139,6 +148,8 @@ const prplInteractiveTaskFormListener = {
139148
formElement.addEventListener( 'submit', ( event ) => {
140149
event.preventDefault();
141150

151+
prplInteractiveTaskFormListener.showLoading( formElement );
152+
142153
const formData = new FormData( formElement );
143154
const settingsToPass = {};
144155
settingsToPass[ setting ] = settingCallbackValue(
@@ -157,7 +168,6 @@ const prplInteractiveTaskFormListener = {
157168
},
158169
} )
159170
.then( ( response ) => {
160-
console.log( response );
161171
if ( true !== response.success ) {
162172
// Show error to the user.
163173
prplInteractiveTaskFormListener.showError(
@@ -193,6 +203,10 @@ const prplInteractiveTaskFormListener = {
193203
error,
194204
popoverId
195205
);
206+
} )
207+
.finally( () => {
208+
// Hide loading state.
209+
prplInteractiveTaskFormListener.hideLoading( formElement );
196210
} );
197211
} );
198212
},
@@ -241,4 +255,35 @@ const prplInteractiveTaskFormListener = {
241255
);
242256
}
243257
},
258+
259+
/**
260+
* Show loading state.
261+
*
262+
* @param {HTMLFormElement} formElement - The form element.
263+
* @return {void}
264+
*/
265+
showLoading: ( formElement ) => {
266+
// data-action="completeTask"
267+
formElement.querySelector( 'button[type="submit"]' ).disabled = true;
268+
269+
// Add spinner.
270+
const spinner = document.createElement( 'span' );
271+
spinner.classList.add( 'prpl-spinner' );
272+
spinner.innerHTML =
273+
'<span class="spinner" style="visibility: visible;"></span>'; // WP spinner.
274+
275+
// Append spinner after submit button.
276+
formElement.querySelector( 'button[type="submit"]' ).after( spinner );
277+
},
278+
279+
/**
280+
* Hide loading state.
281+
*
282+
* @param {HTMLFormElement} formElement - The form element.
283+
* @return {void}
284+
*/
285+
hideLoading: ( formElement ) => {
286+
formElement.querySelector( 'button[type="submit"]' ).disabled = false;
287+
formElement.querySelector( 'span.prpl-spinner' )?.remove();
288+
},
244289
};

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,11 @@ public function print_popover_form_contents() {
123123
placeholder="<?php \esc_html_e( 'A catchy phrase to describe your website', 'progress-planner' ); ?>"
124124
>
125125
</label>
126-
<button type="submit" class="prpl-button prpl-button-primary" disabled>
127-
<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
128-
</button>
126+
<div class="prpl-steps-nav-wrapper">
127+
<button type="submit" class="prpl-button prpl-button-primary" disabled>
128+
<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
129+
</button>
130+
</div>
129131
<?php
130132
}
131133

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,11 @@ public function print_popover_instructions() {
121121
*/
122122
public function print_popover_form_contents() {
123123
?>
124-
<button type="submit" class="prpl-button prpl-button-primary">
125-
<?php \esc_html_e( 'Disable comment pagination', 'progress-planner' ); ?>
126-
</button>
124+
<div class="prpl-steps-nav-wrapper">
125+
<button type="submit" class="prpl-button prpl-button-primary">
126+
<?php \esc_html_e( 'Disable comment pagination', 'progress-planner' ); ?>
127+
</button>
128+
</div>
127129
<?php
128130
}
129131

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,11 @@ public function print_popover_instructions() {
144144
*/
145145
public function print_popover_form_contents() {
146146
?>
147-
<button type="submit" class="prpl-button prpl-button-primary">
148-
<?php \esc_html_e( 'Disable new comments', 'progress-planner' ); ?>
149-
</button>
147+
<div class="prpl-steps-nav-wrapper" style="justify-content: flex-start;margin-bottom: 1.25rem;">
148+
<button type="submit" class="prpl-button prpl-button-primary">
149+
<?php \esc_html_e( 'Disable new comments', 'progress-planner' ); ?>
150+
</button>
151+
</div>
150152
<?php if ( ! \is_multisite() && \current_user_can( 'install_plugins' ) ) : ?>
151153
<prpl-install-plugin
152154
data-plugin-name="Comment-free zone"

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,11 @@ public function should_add_task() {
140140
*/
141141
public function print_popover_form_contents() {
142142
?>
143-
<button type="submit" class="prpl-button prpl-button-primary">
144-
<?php \esc_html_e( 'Delete the "Hello World!" post', 'progress-planner' ); ?>
145-
</button>
143+
<div class="prpl-steps-nav-wrapper">
144+
<button type="submit" class="prpl-button prpl-button-primary">
145+
<?php \esc_html_e( 'Delete the "Hello World!" post', 'progress-planner' ); ?>
146+
</button>
147+
</div>
146148
<?php
147149
}
148150

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,12 @@ public function print_popover_form_contents() {
236236
</div>
237237
</fieldset>
238238
</div>
239-
<button type="submit" class="prpl-button prpl-button-primary">
240-
<?php \esc_html_e( 'Set permalink structure', 'progress-planner' ); ?>
241-
</button>
239+
240+
<div class="prpl-steps-nav-wrapper">
241+
<button type="submit" class="prpl-button prpl-button-primary">
242+
<?php \esc_html_e( 'Set permalink structure', 'progress-planner' ); ?>
243+
</button>
244+
</div>
242245
<?php
243246
}
244247

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,11 @@ public function should_add_task() {
139139
*/
140140
public function print_popover_form_contents() {
141141
?>
142-
<button type="submit" class="prpl-button prpl-button-primary">
143-
<?php \esc_html_e( 'Delete the "Sample Page" page', 'progress-planner' ); ?>
144-
</button>
142+
<div class="prpl-steps-nav-wrapper">
143+
<button type="submit" class="prpl-button prpl-button-primary">
144+
<?php \esc_html_e( 'Delete the "Sample Page" page', 'progress-planner' ); ?>
145+
</button>
146+
</div>
145147
<?php
146148
}
147149

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,11 @@ public function print_popover_instructions() {
113113
*/
114114
public function print_popover_form_contents() {
115115
?>
116-
<button type="submit" class="prpl-button prpl-button-primary">
117-
<?php \esc_html_e( 'Allow search engines to index your site', 'progress-planner' ); ?>
118-
</button>
116+
<div class="prpl-steps-nav-wrapper">
117+
<button type="submit" class="prpl-button prpl-button-primary">
118+
<?php \esc_html_e( 'Allow search engines to index your site', 'progress-planner' ); ?>
119+
</button>
120+
</div>
119121
<?php
120122
}
121123

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,9 +226,11 @@ public function print_popover_form_contents() {
226226
]
227227
);
228228
?>
229+
<div class="prpl-steps-nav-wrapper">
229230
<button type="submit" class="prpl-button prpl-button-primary">
230-
<?php \esc_html_e( 'Select locale', 'progress-planner' ); ?>
231-
</button>
231+
<?php \esc_html_e( 'Select locale', 'progress-planner' ); ?>
232+
</button>
233+
</div>
232234
<?php
233235
}
234236

0 commit comments

Comments
 (0)