Display a loading animation on the play/pause button when an audio is being loaded

[sarayourfriend]

Problem

Switching between several audio tracks results in small (or sometimes larger) periods of seeming unresponsiveness while the audio track's URL is set to the audio element's current src and the audio loads.

Try playing several different audio tracks in a related audio section one after the other to see this feeling of unresponsiveness.

Description

We could add some kind of loading animation to the play/pause button to indicate that the audio track is being loaded.

cc @panchovm for designs. Can we just use the loader? Or a different spinner? Maybe something else.

Alternatives

Somehow pre-fetch audio tracks when someone hovers over the play/pause button for a determined period of time, or when someone seeks the audio.

Implementation

• 🙋 I would be interested in implementing this feature.

[zackkrida]

@panchovm and I actually just identified this too, during our screenshare to fix his local git merge issues. 👍

[fcoveram]

Resuing an existing pinner related to WordPress sounds better to me. I wonder how the Gutenberg spinner might look like with the dark-charcoal as background color and the moving dot in white.

[sarayourfriend]

Gutenberg also has this spinner that I think they'll eventually move towards using instead of the dot one you linked (but I honestly don't know).

[fcoveram]

I think this spinner is the last version.

[fcoveram]

I was recreating the spinner design and here is a quick prototype of how it might look like. I am using a 24px size with a 1.5px for border thick, dark-charcoal-70 for the circle, and white for the animating section.