Favorite button: Add a loading animation during API request

See WordPress/wordpress.org#350 (comment)

mu-plugins/blocks/favorite-button/render.php

@@ -53,6 +53,7 @@
 	'count' => $settings['count'],
 	'isFavorite' => $is_favorite,
 	'label' => $labels,
+	'isLoading' => false,
 ];
 $encoded_state = wp_json_encode( $init_state );
 
@@ -63,6 +64,7 @@
 	data-wp-context="<?php echo esc_attr( $encoded_state ); ?>"
 	data-wp-class--is-favorite="context.isFavorite"
 	data-wp-class--is-loaded="context.id"
+	data-wp-class--is-loading="context.isLoading"
 >
 	<?php if ( $user_id ) : ?>
 	<button

mu-plugins/blocks/favorite-button/src/style.scss

@@ -63,10 +63,33 @@
 		display: none;
 	}
 
+	/* The interactivity API hasn't kicked in yet, so hide one of the hearts. */
+	&.is-loading {
+		svg {
+			animation-name: favoriteFade;
+			animation-duration: 750ms;
+			animation-iteration-count: infinite;
+		}
+	}
+
 	&.is-variant-small {
 		.wporg-favorite-button__button {
 			border: none;
 			padding: 2px 4px;
 		}
 	}
 }
+
+@keyframes favoriteFade {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}

mu-plugins/blocks/favorite-button/src/view.js

@@ -21,6 +21,8 @@ store( 'wporg/favorite-button', {
 	actions: {
 		*triggerAction() {
 			const context = getContext();
+			context.isLoading = true;
+
 			if ( context.isFavorite ) {
 				try {
 					const result = yield wp.apiFetch( {
@@ -48,6 +50,8 @@ store( 'wporg/favorite-button', {
 					wp.a11y.speak( context.label.favorited, 'polite' );
 				} catch ( error ) {}
 			}
+
+			context.isLoading = false;
 		},
 	},
 } );