feat(TestRun): show loading idicator only after 150ms

assets/admin.scss

@@ -237,7 +237,7 @@
 
 	&__icon {
 		display: flex;
-		transition: opacity 0.3s, transform 0.3s;
+		transition: opacity 0.3s;
 		grid-row: 1 / 1;
 		grid-column: 1 / 1;
 	}
@@ -253,7 +253,7 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, calc(-50% + 5px));
+		transform: translate(-50%, -50%);
 		z-index: 1;
 		visibility: hidden;
 		opacity: 0;
@@ -280,13 +280,11 @@
 
 		.vrts-action-button__icon {
 			opacity: 0;
-			transform: translateY(5px);
 		}
 
 		.vrts-action-button__spinner {
 			visibility: visible;
 			opacity: 1;
-			transform: translate(-50%, -50%);
 
 			path {
 				animation-play-state: running;

components/alert-actions/script.js

@@ -79,8 +79,6 @@ class VrtsAlertActions extends window.HTMLElement {
 			return;
 		}
 
-		$el.setAttribute( 'data-vrts-loading', 'true' );
-
 		const action = $el.getAttribute( 'data-vrts-alert-action' );
 		const id = $el.getAttribute( 'data-vrts-alert-id' );
 
@@ -91,6 +89,10 @@ class VrtsAlertActions extends window.HTMLElement {
 		const restEndpoint = `${ window.vrts_admin_vars.rest_url }/alerts/${ id }/${ action }`;
 		const method = shouldSetAction ? 'POST' : 'DELETE';
 
+		const timeout = setTimeout( () => {
+			$el.setAttribute( 'data-vrts-loading', 'true' );
+		}, 150 );
+
 		fetch( restEndpoint, {
 			method,
 			headers: {
@@ -126,6 +128,8 @@ class VrtsAlertActions extends window.HTMLElement {
 						);
 					}
 				}
+
+				clearTimeout( timeout );
 			} );
 	}
 

components/test-run-alerts/script.js

@@ -127,7 +127,10 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 		} );
 
 		$el.setAttribute( 'data-vrts-current', 'true' );
-		$comparisons.setAttribute( 'data-vrts-loading', 'true' );
+
+		const timeout = setTimeout( () => {
+			$comparisons.setAttribute( 'data-vrts-loading', 'true' );
+		}, 150 );
 
 		fetch( href )
 			.then( ( response ) => {
@@ -159,6 +162,8 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 				if ( $newPagination ) {
 					$pagination.replaceWith( $newPagination );
 				}
+
+				clearTimeout( timeout );
 			} );
 	}
 
@@ -172,8 +177,6 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 			return;
 		}
 
-		$el.setAttribute( 'data-vrts-loading', 'true' );
-
 		const action = $el.getAttribute( 'data-vrts-test-run-action' );
 		const id = $el.getAttribute( 'data-vrts-test-run-id' );
 
@@ -184,6 +187,10 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 		const restEndpoint = `${ window.vrts_admin_vars.rest_url }/test-runs/${ id }/${ action }`;
 		const method = shouldSetAction ? 'POST' : 'DELETE';
 
+		const timeout = setTimeout( () => {
+			$el.setAttribute( 'data-vrts-loading', 'true' );
+		}, 150 );
+
 		fetch( restEndpoint, {
 			method,
 			headers: {
@@ -202,16 +209,18 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 					shouldSetAction ? 'secondary' : 'primary'
 				);
 
-				const $alert = document.querySelectorAll(
+				const $alerts = document.querySelectorAll(
 					'.vrts-test-run-alerts__card'
 				);
 
-				$alert.forEach( ( item ) => {
+				$alerts.forEach( ( item ) => {
 					item.setAttribute(
 						'data-vrts-state',
 						shouldSetAction ? 'read' : 'unread'
 					);
 				} );
+
+				clearTimeout( timeout );
 			} );
 	}
 

components/test-run-pagination/script.js

@@ -47,7 +47,10 @@ class VrtsTestRunPagination extends window.HTMLElement {
 		} );
 
 		$nextAlert.setAttribute( 'data-vrts-current', 'true' );
-		$comparisons.setAttribute( 'data-vrts-loading', 'true' );
+
+		const timeout = setTimeout( () => {
+			$comparisons.setAttribute( 'data-vrts-loading', 'true' );
+		}, 150 );
 
 		$sidebar.scrollTo( {
 			top: $nextAlert.offsetTop - 100,
@@ -86,6 +89,8 @@ class VrtsTestRunPagination extends window.HTMLElement {
 				if ( $newPagination ) {
 					this.replaceWith( $newPagination );
 				}
+
+				clearTimeout( timeout );
 			} );
 	}