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,7 +251,6 @@ const PlaylistTrackEdit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				{ !! temporaryURL && <Spinner /> }
 				<button
 					className="wp-block-playlist-track__button"
 					onClick={ () => setCurrentTrackClientId( clientId ) }
@@ -300,6 +299,9 @@ const PlaylistTrackEdit = ( {
 							</span>
 						) }
 						{ length }
+						{ !! temporaryURL && (
+							<Spinner className="wp-block-playlist-track__spinner" />
+						) }
 					</span>
 					<span className="screen-reader-text">{ __( 'Play' ) }</span>
 				</button>

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;
+		}
+
 		.wp-block-playlist-track__content {
 			flex: 1 1 0;
 			min-width: 0;
@@ -60,6 +65,9 @@
 		}
 
 		.wp-block-playlist-track__length {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
 			margin-left: auto;
 			font-size: 0.85em;
 			opacity: 0.7;

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';
@@ -169,6 +169,7 @@ describe( 'PlaylistTrackEdit', () => {
 		renderEdit( {
 			attributes: {
 				blob: 'blob:https://example.com/temporary-track',
+				length: undefined,
 				src: undefined,
 			},
 		} );
@@ -178,6 +179,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', () => {