chore: merge epic/ras-acc into update/reader-registration-block

Automattic · Jul 16, 2024 · 649d36f · 649d36f
1 parent 1afb97f
commit 649d36f
Show file tree

Hide file tree

Showing 3 changed files with 4,842 additions and 344 deletions.
diff --git a/assets/blocks/reader-registration/index.php b/assets/blocks/reader-registration/index.php
@@ -263,6 +263,7 @@ class="newspack-ui__button newspack-ui__button--primary"
 								/>
 								<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--loading">
 									<span><?php echo \esc_html( $attrs['label'] ); ?></span>
+									<span class="submit"><?php echo \esc_html( $attrs['label'] ); ?></span>
 								</button>
 							</div>
 							<div class="newspack-registration__response <?php echo ( empty( $message ) ) ? 'newspack-registration--hidden' : null; ?>">

diff --git a/assets/blocks/reader-registration/style.scss b/assets/blocks/reader-registration/style.scss
@@ -199,6 +199,34 @@
 				}
 			}
 		}
+
+		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 ) );
+			}
+		}
 	}
 
 	&--hidden,