diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 0929b9a0e..32e376392 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -23,6 +23,7 @@ import { useViewportMatch } from '@wordpress/compose'; const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); const [ isSaving, setIsSaving ] = useState( false ); + const [ isRegenerating, setIsRegenerating ] = useState( false ); const [ isEditingTitle, setIsEditingTitle ] = useState( false ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -64,12 +65,15 @@ const StepSiteGenEditorHeader = () => { return; } + setIsRegenerating( true ); if ( currentData.sitegen.siteDetails?.prompt === '' ) { + setIsRegenerating( false ); return; } const homepages = currentData.sitegen.homepages.data; if ( ! ( homepage.slug in homepages ) ) { + setIsRegenerating( false ); return; } @@ -82,6 +86,7 @@ const StepSiteGenEditorHeader = () => { ); if ( response.error ) { + setIsRegenerating( false ); return; } @@ -90,6 +95,7 @@ const StepSiteGenEditorHeader = () => { currentData.sitegen.homepages.data = homepages; currentData.sitegen.homepages.active = regeneratedHomepage; setCurrentOnboardingData( currentData ); + setIsRegenerating( false ); }; const handleViewAll = () => { @@ -151,6 +157,13 @@ const StepSiteGenEditorHeader = () => { > { __( 'Regenerate', 'wp-module-onboarding' ) } + { isRegenerating && ( + + ) } ) } diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss index 51477ef3e..a15b544e8 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss @@ -32,6 +32,13 @@ &__disabled { cursor: disabled; } + + &__spinner { + border-radius: 50%; + width: 5em; + height: 5em; + font-size: 3px; + } } }