Playlist Track: Show upload spinner inline

Author: scruffian

packages/block-library/CHANGELOG.md

@@ -18,6 +18,7 @@
 ### Bug Fixes
 
 -   Footnotes: Treat unreadable `footnotes` post meta as no footnotes instead of throwing, so the block shows its placeholder rather than the block crash warning ([#81201](https://github.com/WordPress/gutenberg/pull/81201)).
+-   Playlist Track: Show the upload loading indicator inline with the track row.
 -   Playlist: Improve handling of declarative waveform player configuration ([#81342](https://github.com/WordPress/gutenberg/pull/81342)).
 
 ### Internal

packages/block-library/src/playlist-track/edit.js

@@ -251,14 +251,16 @@ const PlaylistTrackEdit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				{ !! temporaryURL && <Spinner /> }
 				<button
 					className="wp-block-playlist-track__button"
 					onClick={ () => setCurrentTrackClientId( clientId ) }
 					aria-current={
 						currentTrackClientId === clientId ? 'true' : 'false'
 					}
 				>
+					{ !! temporaryURL && (
+						<Spinner className="wp-block-playlist-track__spinner" />
+					) }
 					{ showImages && !! image && (
 						<img
 							className="wp-block-playlist-track__image"

packages/block-library/src/playlist-track/style.scss

@@ -43,6 +43,11 @@
 			object-fit: cover;
 		}
 
+		.wp-block-playlist-track__spinner {
+			flex: 0 0 auto;
+			margin: 0 var(--wp--preset--spacing--20, 0.5em) 0 0;
+		}
+
 		.wp-block-playlist-track__content {
 			flex: 1 1 0;
 			min-width: 0;

packages/block-library/src/playlist-track/test/edit.js

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { useDispatch } from '@wordpress/data';
 import PlaylistTrackEdit from '../edit';
 import { PlaylistContext } from '../../playlist/context';
@@ -178,6 +178,13 @@ describe( 'PlaylistTrackEdit', () => {
 				url: 'blob:https://example.com/temporary-track',
 			} )
 		);
+		const trackButton = screen.getByRole( 'button', {
+			name: /Song One/,
+		} );
+
+		expect(
+			within( trackButton ).getByRole( 'presentation', { hidden: true } )
+		).toBeInTheDocument();
 	} );
 
 	it( 'preserves the current track source when a replacement upload fails', () => {