AI Image: Update loading state (#38062)

* AI Image: Update loading interface * changelog * AI Image: Update creating image copy
Automattic · Jun 27, 2024 · 8f7846b · 8f7846b
1 parent 821ad11
commit 8f7846b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 46 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-ai-general-image-loading b/projects/plugins/jetpack/changelog/update-ai-general-image-loading
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Update loading state of AI Image
diff --git a/.../extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx b/.../extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx
@@ -113,12 +113,7 @@ export default function AiImageModal( {
 
 	const generateButton = (
 		<Tooltip text={ costTooltipText } placement="bottom">
-			<Button
-				onClick={ handleGenerate }
-				variant="secondary"
-				isBusy={ generating }
-				disabled={ disableGenerateButton }
-			>
+			<Button onClick={ handleGenerate } variant="secondary" disabled={ disableGenerateButton }>
 				{ generateButtonLabel }
 			</Button>
 		</Tooltip>

diff --git a/...pack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.scss b/...pack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.scss
@@ -1,4 +1,4 @@
-.ai-assistant-featured-image {
+.ai-assistant-image {
 	&__blank {
 		display: flex;
 		justify-content: center;
@@ -21,6 +21,11 @@
 		}
 	}
 
+	&__loading {
+		flex-direction: column;
+		gap: 8px;
+	}
+
 	&__error {
 		display: flex;
 		flex-direction: column;
@@ -52,9 +57,10 @@
 					right: 0;
 				}
 
-				&__prev, &__next {
+				&__prev,
+				&__next {
 					&:hover {
-						background-color: rgba(0, 0, 0, 0.3);
+						background-color: rgba( 0, 0, 0, 0.3 );
 						opacity: 1;
 					}
 
@@ -70,7 +76,7 @@
 					display: flex;
 					align-items: center;
 					justify-content: center;
-					transition: opacity .3s;
+					transition: opacity 0.3s;
 					border: none;
 					position: absolute;
 					top: 0;
@@ -97,7 +103,8 @@
 			padding: 6px 0;
 
 			.ai-carrousel {
-				&__prev, &__next {
+				&__prev,
+				&__next {
 					display: flex;
 					align-items: center;
 					justify-content: center;
@@ -126,16 +133,16 @@
 			height: auto;
 			position: absolute;
 			left: 8px;
-			transform: translateX(100%);
-			transition: transform .5s ;
+			transform: translateX( 100% );
+			transition: transform 0.5s;
 
 			&.is-prev {
-				transform: translateX(-100%);
+				transform: translateX( -100% );
 				left: -8px;
 			}
 
 			&.is-current {
-				transform: translateX(0);
+				transform: translateX( 0 );
 				position: static;
 			}
 		}

diff --git a/...tpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx b/...tpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx
@@ -27,7 +27,7 @@ export type CarrouselImages = CarrouselImageData[];
 function AiIcon( { className }: { className?: string } ) {
 	const AiSVG = (
 		<SVG width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<G clip-path="url(#clip0_4479_1006)">
+			<G clipPath="url(#clip0_4479_1006)">
 				<Path
 					d="M7.87488 0L10.1022 5.64753L15.7498 7.87488L10.1022 10.1022L7.87488 15.7498L5.64753 10.1022L0 7.87488L5.64753 5.64753L7.87488 0Z"
 					fill="#A7AAAD"
@@ -51,20 +51,20 @@ function AiIcon( { className }: { className?: string } ) {
 	return <Icon icon={ AiSVG } width={ 42 } height={ 42 } className={ className } />;
 }
 
-function BlankImage( { children, isDotted = false } ) {
+function BlankImage( { children, isDotted = false, contentClassName = '' } ) {
 	const blankImage = (
 		<img
-			className="ai-assistant-featured-image__carrousel-image"
+			className="ai-assistant-image__carrousel-image"
 			src={ `data:image/png;base64,${ blank.base64 }` }
 			alt=""
 		/>
 	);
 
 	return (
-		<div className="ai-assistant-featured-image__blank">
+		<div className="ai-assistant-image__blank">
 			{ blankImage }
 			<div
-				className={ clsx( 'ai-assistant-featured-image__blank-content', {
+				className={ clsx( 'ai-assistant-image__blank-content', contentClassName, {
 					'is-dotted': isDotted,
 				} ) }
 			>
@@ -110,19 +110,20 @@ export default function Carrousel( {
 	);
 
 	return (
-		<div className="ai-assistant-featured-image__carrousel">
-			<div className="ai-assistant-featured-image__carrousel-images">
+		<div className="ai-assistant-image__carrousel">
+			<div className="ai-assistant-image__carrousel-images">
 				{ images.length > 1 && prevButton }
 				{ images.map( ( { image, generating, error }, index ) => (
 					<div
 						key={ `image:` + index }
-						className={ clsx( 'ai-assistant-featured-image__carrousel-image-container', {
+						className={ clsx( 'ai-assistant-image__carrousel-image-container', {
 							'is-current': current === index,
 							'is-prev': current > index,
 						} ) }
 					>
 						{ generating ? (
-							<BlankImage>
+							<BlankImage contentClassName="ai-assistant-image__loading">
+								{ __( 'Creating image…', 'jetpack' ) }
 								<Spinner
 									style={ {
 										width: '50px',
@@ -134,13 +135,13 @@ export default function Carrousel( {
 							<>
 								{ error ? (
 									<BlankImage isDotted>
-										<div className="ai-assistant-featured-image__error">
+										<div className="ai-assistant-image__error">
 											{ __(
 												'An error occurred while generating the image. Please, try again!',
 												'jetpack'
 											) }
 											{ error?.message && (
-												<span className="ai-assistant-featured-image__error-message">
+												<span className="ai-assistant-image__error-message">
 													{ error?.message }
 												</span>
 											) }
@@ -153,11 +154,7 @@ export default function Carrousel( {
 												<AiIcon />
 											</BlankImage>
 										) : (
-											<img
-												className="ai-assistant-featured-image__carrousel-image"
-												src={ image }
-												alt=""
-											/>
+											<img className="ai-assistant-image__carrousel-image" src={ image } alt="" />
 										) }
 									</>
 								) }
@@ -167,13 +164,13 @@ export default function Carrousel( {
 				) ) }
 				{ images.length > 1 && nextButton }
 			</div>
-			<div className="ai-assistant-featured-image__carrousel-footer">
-				<div className="ai-assistant-featured-image__carrousel-counter">
+			<div className="ai-assistant-image__carrousel-footer">
+				<div className="ai-assistant-image__carrousel-counter">
 					{ prevButton }
 					{ current + 1 } / { images.length }
 					{ nextButton }
 				</div>
-				<div className="ai-assistant-featured-image__carrousel-actions">{ actions }</div>
+				<div className="ai-assistant-image__carrousel-actions">{ actions }</div>
 			</div>
 		</div>
 	);

diff --git a/...ins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx b/...ins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx
@@ -272,12 +272,7 @@ export default function FeaturedImage( {
 		: null;
 
 	const acceptButton = (
-		<Button
-			onClick={ handleAccept }
-			variant="primary"
-			isBusy={ currentImage?.generating }
-			disabled={ ! currentImage?.image }
-		>
+		<Button onClick={ handleAccept } variant="primary" disabled={ ! currentImage?.image }>
 			{ __( 'Set as featured image', 'jetpack' ) }
 		</Button>
 	);

diff --git a/...pack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx b/...pack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx
@@ -222,12 +222,7 @@ export default function GeneralPurposeImage( {
 		: null;
 
 	const acceptButton = (
-		<Button
-			onClick={ handleAccept }
-			variant="primary"
-			isBusy={ currentImage?.generating }
-			disabled={ ! currentImage?.image }
-		>
+		<Button onClick={ handleAccept } variant="primary" disabled={ ! currentImage?.image }>
 			{ __( 'Insert image', 'jetpack' ) }
 		</Button>
 	);