Blueprint - Add busy state on the import btn (#50716)

* Add busy state

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>
This commit is contained in:
Moon 2024-08-16 09:59:14 -07:00 committed by GitHub
parent cfdaa7e6cb
commit 454273d6d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 1 deletions

View File

@ -25,6 +25,7 @@ export const BuilderIntro = ( {
} ) => {
const [ file, setFile ] = useState( null );
const [ message, setMessage ] = useState( '' );
const [ importing, setImporting ] = useState( false );
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleFileChange = ( event: any ) => {
@ -37,6 +38,8 @@ export const BuilderIntro = ( {
return;
}
setImporting( true );
const formData = new FormData();
formData.append( 'file', file );
@ -61,11 +64,14 @@ export const BuilderIntro = ( {
data.data.redirect
);
setImporting( false );
window.setTimeout( () => {
// @ts-expect-error tmp
window.location.href = data.data.redirect;
}, 2000 );
} else {
setImporting( false );
// @ts-expect-error tmp
setMessage( `Error: ${ data.message }` );
// @ts-expect-error tmp
@ -78,6 +84,7 @@ export const BuilderIntro = ( {
}
} )
.catch( ( error ) => {
setImporting( false );
setMessage( `Error: ${ error.message }` );
} );
};
@ -106,7 +113,11 @@ export const BuilderIntro = ( {
type="file"
onChange={ handleFileChange }
/>
<Button variant="primary" onClick={ handleUpload }>
<Button
variant="primary"
onClick={ handleUpload }
isBusy={ importing }
>
{ __( 'Import', 'woocommerce' ) }
</Button>
<div>

View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Comment: This feature is behind a feature flag.