Improve performance

src/OnboardingSPA/components/CardWithOptions/index.js

@@ -1,3 +1,4 @@
+import { memo } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
 const CardWithOptions = ( { title, options, skip, callback } ) => {
@@ -68,4 +69,4 @@ const CardWithOptions = ( { title, options, skip, callback } ) => {
 	);
 };
 
-export default CardWithOptions;
+export default memo( CardWithOptions );

src/OnboardingSPA/components/Header/index.js

@@ -11,6 +11,7 @@ import {
 } from '../../../constants';
 import classNames from 'classnames';
 import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step';
+import { SITEGEN_FLOW } from '../../data/flows/constants';
 
 const Header = () => {
 	const { headers, headerActiveView, isHeaderEnabled, currentStep } =
@@ -25,6 +26,7 @@ const Header = () => {
 		} );
 
 	const isEditorStep = currentStep === stepSiteGenEditor;
+	const isSitegenFlow = window.nfdOnboarding.currentFlow === SITEGEN_FLOW;
 
 	return (
 		<>
@@ -40,9 +42,15 @@ const Header = () => {
 			<Slot name={ `${ headerActiveView }/${ HEADER_TOP }` } />
 			{ isHeaderEnabled && (
 				<div
-					className={ classNames( 'nfd-onboarding-header', {
-						'nfd-onboarding-header--dark': isEditorStep,
-					} ) }
+					className={ classNames(
+						'nfd-onboarding-header',
+						{
+							'nfd-onboarding-header--dark': isEditorStep,
+						},
+						{
+							'nfd-onboarding-header--sitegen': isSitegenFlow,
+						}
+					) }
 				>
 					<div className="nfd-onboarding-header__start">
 						<Slot

src/OnboardingSPA/components/Header/stylesheet.scss

@@ -73,6 +73,13 @@
 	}
 }
 
+.nfd-onboarding-header--sitegen {
+
+	body.is-fullscreen-mode & {
+		padding-left: 0;
+	}
+}
+
 .nfd-onboarding-skeleton.is-drawer-open {
 
 	.nfd-onboarding-header {

src/OnboardingSPA/components/Heading/AIHeading/index.js

@@ -1,3 +1,5 @@
+import { memo } from '@wordpress/element';
+
 const AIHeading = ( { title } ) => {
 	return (
 		<div className={ 'ai-heading' }>
@@ -7,4 +9,4 @@ const AIHeading = ( { title } ) => {
 	);
 };
 
-export default AIHeading;
+export default memo( AIHeading );

src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js

@@ -1,7 +1,7 @@
 import getContents from './contents';
 import { useSelect } from '@wordpress/data';
 import { useNavigate } from 'react-router-dom';
-import { useEffect, useState } from '@wordpress/element';
+import { memo, useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 
 const SiteGenLoader = ( { autoNavigate = false } ) => {
@@ -21,8 +21,10 @@
 
 	useEffect( () => {
 		const statusTimer = setInterval( () => {
 			statusIdx += 1;
-			if ( statusIdx === content.status.length ) statusIdx = 0;
+			if ( statusIdx === content.status.length ) {
+				statusIdx = 0;
+			}
 			setStatus( content.status[ statusIdx ].title );
 		}, 3000 );
 		return () => {
@@ -36,7 +38,7 @@
 				currentData.sitegen.siteGenMetaStatus.totalCount ) *
 			100;
 		setPercentage( percentageValue );
 	}, [ currentData.sitegen.siteGenMetaStatus.currentStatus ] );
 
 	useEffect( () => {
 		if ( percentage === 100 ) {
@@ -44,7 +46,7 @@
 				navigate( nextStep.path );
 			}
 		}
 	}, [ percentage ] );
 
 	return (
 		<div className={ 'nfd-sg-loader' }>
@@ -65,4 +67,4 @@
 	);
 };
 
-export default SiteGenLoader;
+export default memo( SiteGenLoader );

src/OnboardingSPA/components/StartOptions/index.js

@@ -3,6 +3,7 @@ import { resolveGetDataForFlow } from '../../data/flows';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { validateFlow } from '../../data/flows/utils';
 import { useNavigate } from 'react-router-dom';
+import { memo } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../store';
 
 const StartOptions = ( { questionnaire, oldFlow, options } ) => {
@@ -101,4 +102,4 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => {
 	);
 };
 
-export default StartOptions;
+export default memo( StartOptions );

src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { __ } from '@wordpress/i18n';
 import { useRef, useEffect, useState, memo } from '@wordpress/element';
 
 const TextInputSiteGen = ( {
@@ -17,10 +18,10 @@
 		textareaRef.current.style.height = height;
 		const scrollHeight = textareaRef.current.scrollHeight;
 		textareaRef.current.style.height = scrollHeight + 'px';
-		const analysisResult = calculateAnalysisScore( customerInput );
+		const analysisResult = calculateAnalysisScore( customerInput?.trim() );
 		setAnalysisScore( analysisResult );
 		setIsValidInput( analysisResult >= 2 );
 	}, [ customerInput ] );
 
 	const calculateAnalysisScore = ( input ) => {
 		/* Number of Characters in the input
@@ -87,7 +88,7 @@
 				{ customerInput ? (
 					<div className={ 'nfd-sg-input-box__info' }>
 						<div className={ 'nfd-sg-input-box__info-text' }>
-							Detail
+							{ __( 'Detail', 'wp-module-onboarding' ) }
 						</div>
 						{ renderDetails() }
 					</div>

src/OnboardingSPA/steps/SiteGen/Building/index.js

@@ -1,6 +1,6 @@
 import CommonLayout from '../../../components/Layouts/Common';
 
-import { useEffect } from '@wordpress/element';
+import { memo, useEffect } from '@wordpress/element';
 
 import { useDispatch } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../store';
@@ -42,4 +42,4 @@ const SiteGenBuilding = () => {
 	);
 };
 
-export default SiteGenBuilding;
+export default memo( SiteGenBuilding );

src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

@@ -40,16 +40,22 @@
 		setDrawerActiveView( false );
 
 		if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
+			setIsValidInput( true );
+			setFooterNavEnabled( true );
 			return setCustomerInput( currentData.sitegen.siteDetails.prompt );
 		}
 		setFooterNavEnabled( false );
 	}, [] );
 
 	useEffect( () => {
-		setFooterNavEnabled( isValidInput );
-		currentData.sitegen.siteDetails.prompt = customerInput;
-		setCurrentOnboardingData( currentData );
+		if ( customerInput?.trim() === '' ) {
+			setFooterNavEnabled( false );
+		} else {
+			setFooterNavEnabled( isValidInput );
+			currentData.sitegen.siteDetails.prompt = customerInput?.trim();
+			setCurrentOnboardingData( currentData );
+		}
 	}, [ customerInput ] );
 
 	return (
 		<CommonLayout isCentered>

src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js

@@ -1,5 +1,5 @@
 import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { memo, useEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
 import getContents from './contents';
@@ -64,4 +64,4 @@ const SiteGenSiteSocialMedia = () => {
 	);
 };
 
-export default SiteGenSiteSocialMedia;
+export default memo( SiteGenSiteSocialMedia );

src/OnboardingSPA/steps/SiteGen/Welcome/index.js

@@ -1,4 +1,4 @@
-import { useEffect } from '@wordpress/element';
+import { memo, useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
 import CommonLayout from '../../../components/Layouts/Common';
@@ -46,4 +46,4 @@ const SiteGenWelcome = () => {
 	);
 };
 
-export default SiteGenWelcome;
+export default memo( SiteGenWelcome );

src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss

@@ -15,6 +15,7 @@
 
 				@media (max-width: #{ ($break-small) }) {
 					margin: 16px;
+					margin-bottom: 100px;
 				}
 
 				@media (min-width: 2600px ) {
@@ -71,6 +72,7 @@
 					width: 100%;
 					margin: 10px;
 					padding: 0;
+					margin-bottom: 40px;
 
 					&__text {
 						text-align: center;