diff --git a/mu-plugins/blocks/favorite-button/render.php b/mu-plugins/blocks/favorite-button/render.php index 8096df40..c8e02423 100644 --- a/mu-plugins/blocks/favorite-button/render.php +++ b/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 diff --git a/mu-plugins/blocks/favorite-button/src/style.scss b/mu-plugins/blocks/favorite-button/src/style.scss index 7c8e63e4..17112631 100644 --- a/mu-plugins/blocks/favorite-button/src/style.scss +++ b/mu-plugins/blocks/favorite-button/src/style.scss @@ -63,6 +63,15 @@ 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; @@ -70,3 +79,17 @@ } } } + +@keyframes favoriteFade { + 0% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} diff --git a/mu-plugins/blocks/favorite-button/src/view.js b/mu-plugins/blocks/favorite-button/src/view.js index 0853cfd7..22038c5b 100644 --- a/mu-plugins/blocks/favorite-button/src/view.js +++ b/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; }, }, } );