fix: cys design-with-api loader should not loop (#40829)

packages/js/onboarding/changelog/add-loader-component-shouldloop-prop

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Added shouldLoop prop for the Loader component to determine if looping should happen

packages/js/onboarding/src/components/Loader/Loader.tsx

@@ -118,19 +118,30 @@ Loader.Subtext = ( {
 
 const LoaderSequence = ( {
 	interval,
+	shouldLoop = true,
 	children,
-}: { interval: number } & withReactChildren ) => {
+}: { interval: number; shouldLoop?: boolean } & withReactChildren ) => {
 	const [ index, setIndex ] = useState( 0 );
+	const childCount = Children.count( children );
 
 	useEffect( () => {
 		const rotateInterval = setInterval( () => {
-			setIndex(
-				( prevIndex ) => ( prevIndex + 1 ) % Children.count( children )
-			);
+			setIndex( ( prevIndex ) => {
+				const nextIndex = prevIndex + 1;
+
+				if ( shouldLoop ) {
+					return nextIndex % childCount;
+				}
+				if ( nextIndex < childCount ) {
+					return nextIndex;
+				}
+				clearInterval( rotateInterval );
+				return prevIndex;
+			} );
 		}, interval );
 
 		return () => clearInterval( rotateInterval );
-	}, [ interval, children ] );
+	}, [ interval, children, shouldLoop, childCount ] );
 
 	const childToDisplay = Children.toArray( children )[ index ];
 	return <>{ childToDisplay }</>;

packages/js/onboarding/src/components/Loader/stories/index.tsx

@@ -29,8 +29,28 @@ export const ExampleSimpleLoader = () => (
 	</Loader>
 );
 
+export const ExampleNonLoopingLoader = () => (
+	<Loader>
+		<Loader.Layout>
+			<Loader.Illustration>
+				<img
+					src="https://placekitten.com/200/200"
+					alt="a cute kitteh"
+				/>
+			</Loader.Illustration>
+			<Loader.Title>Very Impressive Title</Loader.Title>
+			<Loader.ProgressBar progress={ 30 } />
+			<Loader.Sequence interval={ 1000 } shouldLoop={ false }>
+				<Loader.Subtext>Message 1</Loader.Subtext>
+				<Loader.Subtext>Message 2</Loader.Subtext>
+				<Loader.Subtext>Message 3</Loader.Subtext>
+			</Loader.Sequence>
+		</Loader.Layout>
+	</Loader>
+);
+
 /** <Loader> component story with controls */
-const Template = ( { progress, title, messages } ) => (
+const Template = ( { progress, title, messages, shouldLoop } ) => (
 	<Loader>
 		<Loader.Layout>
 			<Loader.Illustration>
@@ -41,7 +61,7 @@ const Template = ( { progress, title, messages } ) => (
 			</Loader.Illustration>
 			<Loader.Title>{ title }</Loader.Title>
 			<Loader.ProgressBar progress={ progress } />
-			<Loader.Sequence interval={ 1000 }>
+			<Loader.Sequence interval={ 1000 } shouldLoop={ shouldLoop }>
 				{ messages.map( ( message, index ) => (
 					<Loader.Subtext key={ index }>{ message }</Loader.Subtext>
 				) ) }
@@ -54,6 +74,7 @@ export const ExampleLoaderWithControls = Template.bind( {} );
 ExampleLoaderWithControls.args = {
 	title: 'Very Impressive Title',
 	progress: 30,
+	shouldLoop: true,
 	messages: [ 'Message 1', 'Message 2', 'Message 3' ],
 };
 
@@ -71,6 +92,9 @@ export default {
 				max: 100,
 			},
 		},
+		shouldLoop: {
+			control: 'boolean',
+		},
 		messages: {
 			control: 'object',
 		},

plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx

@@ -91,7 +91,7 @@ export const ApiCallLoader = () => {
 
 	return (
 		<Loader>
-			<Loader.Sequence interval={ 3000 }>
+			<Loader.Sequence interval={ 3500 } shouldLoop={ false }>
 				{ loaderSteps.map( ( step, index ) => (
 					<Loader.Layout key={ index }>
 						<Loader.Illustration>

plugins/woocommerce/changelog/fix-cys-design-with-ai-loader-loop

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix cys loading screep should not be looping