diff --git a/projects/plugins/jetpack/changelog/update-ai-general-image-loading b/projects/plugins/jetpack/changelog/update-ai-general-image-loading new file mode 100644 index 0000000000000..8f641e1282a84 --- /dev/null +++ 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/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx index ca1be7ddd7d6a..0c5f5cf914e54 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/ai-image-modal.tsx @@ -113,12 +113,7 @@ export default function AiImageModal( { const generateButton = ( - diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.scss index 11fb7bd939c00..657d07d5042a4 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.scss +++ b/projects/plugins/jetpack/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/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx index c478f1308130b..841e2b43af9a8 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx +++ b/projects/plugins/jetpack/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 = ( - + ; } -function BlankImage( { children, isDotted = false } ) { +function BlankImage( { children, isDotted = false, contentClassName = '' } ) { const blankImage = ( ); return ( -
+
{ blankImage }
@@ -110,19 +110,20 @@ export default function Carrousel( { ); return ( -
-
+
+
{ images.length > 1 && prevButton } { images.map( ( { image, generating, error }, index ) => (
index, } ) } > { generating ? ( - + + { __( 'Creating imageā€¦', 'jetpack' ) } { error ? ( -
+
{ __( 'An error occurred while generating the image. Please, try again!', 'jetpack' ) } { error?.message && ( - + { error?.message } ) } @@ -153,11 +154,7 @@ export default function Carrousel( { ) : ( - + ) } ) } @@ -167,13 +164,13 @@ export default function Carrousel( { ) ) } { images.length > 1 && nextButton }
-
-
+
+
{ prevButton } { current + 1 } / { images.length } { nextButton }
-
{ actions }
+
{ actions }
); diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx index 1e8d949262a01..4d162c408d379 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx @@ -272,12 +272,7 @@ export default function FeaturedImage( { : null; const acceptButton = ( - ); diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx index 8a295ae74f619..d6297e8219c82 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/general-purpose-image.tsx @@ -222,12 +222,7 @@ export default function GeneralPurposeImage( { : null; const acceptButton = ( - );