feat: add spinner to registration block submit button (#3180)

This PR adds a loading spinner to the registration form submit button when clicked to make it more clear the registration form is loading.

assets/blocks/reader-registration/index.php

@@ -271,15 +271,16 @@ function render_block( $attrs, $content ) {
 									placeholder="<?php echo \esc_attr( $attrs['placeholder'] ); ?>"
 								/>
 								<?php Reader_Activation::render_honeypot_field( $attrs['placeholder'] ); ?>
-								<input
+								<button
 								<?php
 								if ( $is_admin_preview ) :
 									?>
 									disabled
 									<?php endif; ?>
 									type="submit"
-									value="<?php echo \esc_attr( $attrs['label'] ); ?>"
-								/>
+								>
+									<span class="submit"><?php echo \esc_html( $attrs['label'] ); ?></span>
+								</button>
 							</div>
 							<?php Reader_Activation::render_third_party_auth(); ?>
 							<div class="newspack-registration__response <?php echo ( empty( $message ) ) ? 'newspack-registration--hidden' : null; ?>">

assets/blocks/reader-registration/style.scss

@@ -168,6 +168,34 @@
 		input {
 			pointer-events: none;
 		}
+
+		button[type='submit'] {
+			position: relative;
+
+			span.submit {
+				visibility: hidden;
+			}
+
+			span.spinner {
+				--animation-duration: 900ms;
+				--animation-timing-function: linear;
+				--color-spinner-primary: transparent;
+				--color-spinner-background: currentcolor;
+				--size: 18px;
+				--stroke-width: 1.5px;
+
+				animation: var(--animation-timing-function) var(--animation-duration) infinite spin;
+				border-color: var(--color-spinner-primary) var(--color-spinner-primary) var(--color-spinner-background) var(--color-spinner-background);
+				border-radius: 50%;
+				border-style: solid;
+				border-width: var(--stroke-width);
+				height: var(--size);
+				transform: rotate(0deg);
+				width: var(--size);
+				position: absolute;
+				left: calc( 50% - ( var(--size) / 2 ) );
+			}
+		}
 	}
 
 	&__icon {
@@ -266,3 +294,12 @@
 		transform: scale( 1 );
 	}
 }
+
+@keyframes spin {
+  from {
+    transform: rotate( 0deg );
+  }
+  to {
+    transform: rotate( 360deg );
+  }
+}

assets/blocks/reader-registration/view.js

@@ -36,7 +36,9 @@ window.newspackRAS.push( function ( readerActivation ) {
 			}
 
 			const messageElement = container.querySelector( '.newspack-registration__response' );
-			const submitElement = form.querySelector( 'input[type="submit"]' );
+			const submitElement = form.querySelector( 'button[type="submit"]' );
+			const spinner = document.createElement( 'span' );
+			spinner.classList.add( 'spinner' );
 			let successElement = container.querySelector(
 				'.newspack-registration__registration-success'
 			);
@@ -45,6 +47,7 @@ window.newspackRAS.push( function ( readerActivation ) {
 				messageElement.classList.add( 'newspack-registration--hidden' );
 				messageElement.innerHTML = '';
 				submitElement.disabled = true;
+				submitElement.appendChild( spinner );
 				container.classList.add( 'newspack-registration--in-progress' );
 			};
 
@@ -80,6 +83,7 @@ window.newspackRAS.push( function ( readerActivation ) {
 					messageElement.appendChild( messageNode );
 					messageElement.classList.remove( 'newspack-registration--hidden' );
 				}
+				submitElement.removeChild( spinner );
 				submitElement.disabled = false;
 				container.classList.remove( 'newspack-registration--in-progress' );
 			};