From aa2188e2386bb1957c5f8c5f2e5f1ba643b671a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <mail@sgomes.com>
Date: Mon, 26 Aug 2024 13:05:53 +0100
Subject: [PATCH] Wait until animation ends before activating button

---
 .../post-publish-panel/maybe-upload-media.js  | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
index 0aea736a24f215..609864e01716a8 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -60,6 +60,7 @@ function Image( block ) {
 
 export default function PostFormatPanel() {
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ isAnimating, setIsAnimating ] = useState( false );
 	const { editorBlocks, mediaUpload } = useSelect(
 		( select ) => ( {
 			editorBlocks: select( blockEditorStore ).getBlocks(),
@@ -97,27 +98,26 @@ export default function PostFormatPanel() {
 							: image.attributes.url + '?'
 					)
 					.then( ( response ) => response.blob() )
-					.then(
-						( blob ) =>
-							new Promise( ( resolve, reject ) => {
-								mediaUpload( {
-									filesList: [ blob ],
-									onFileChange: ( [ media ] ) => {
-										if ( isBlobURL( media.url ) ) {
-											return;
-										}
+					.then( ( blob ) =>
+						new Promise( ( resolve, reject ) => {
+							mediaUpload( {
+								filesList: [ blob ],
+								onFileChange: ( [ media ] ) => {
+									if ( isBlobURL( media.url ) ) {
+										return;
+									}
 
-										updateBlockAttributes( image.clientId, {
-											id: media.id,
-											url: media.url,
-										} );
-										resolve();
-									},
-									onError() {
-										reject();
-									},
-								} );
-							} )
+									updateBlockAttributes( image.clientId, {
+										id: media.id,
+										url: media.url,
+									} );
+									resolve();
+								},
+								onError() {
+									reject();
+								},
+							} );
+						} ).then( () => setIsAnimating( true ) )
 					)
 			)
 		).finally( () => {
@@ -139,12 +139,14 @@ export default function PostFormatPanel() {
 					gap: '8px',
 				} }
 			>
-				<AnimatePresence>
+				<AnimatePresence
+					onExitComplete={ () => setIsAnimating( false ) }
+				>
 					{ externalImages.map( ( image ) => {
 						return <Image key={ image.clientId } { ...image } />;
 					} ) }
 				</AnimatePresence>
-				{ isUploading ? (
+				{ isUploading || isAnimating ? (
 					<Spinner />
 				) : (
 					<Button variant="primary" onClick={ uploadImages }>