PRESS2 335 Fix the blank space before theme skeleton spins up

includes/Data/Data.php

@@ -13,15 +13,16 @@ final class Data {
 	 */
 	public static function runtime() {
 		return array(
-			'buildUrl'          => \NFD_ONBOARDING_BUILD_URL,
-			'siteUrl'           => \get_site_url(),
-			'restUrl'           => \get_home_url() . '/index.php?rest_route=',
-			'adminUrl'          => \admin_url(),
-			'currentBrand'      => self::current_brand(),
-			'currentPlan'       => self::current_plan(),
-			'currentFlow'       => self::current_flow(),
-			'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(),
-			'previewSettings'   => Preview::get_settings(),
+			'buildUrl'            => \NFD_ONBOARDING_BUILD_URL,
+			'siteUrl'             => \get_site_url(),
+			'restUrl'             => \get_home_url() . '/index.php?rest_route=',
+			'adminUrl'            => \admin_url(),
+			'currentBrand'        => self::current_brand(),
+			'currentPlan'         => self::current_plan(),
+			'currentFlow'         => self::current_flow(),
+			'pluginInstallHash'   => Permissions::rest_get_plugin_install_hash(),
+			'previewSettings'     => Preview::get_settings(),
+			'themeStepData'       => self::theme_data(),
 		);
 	}
 
@@ -105,4 +106,17 @@ public static function customer_data() {
 		}
 		 return array();
 	}
+
+	/**
+	 * Get the current theme data like the theme variations and previews per step
+	 *
+	 * @return array
+	 */
+	public static function theme_data()
+	{
+		$theme_step_data = Patterns::get_count_of_patterns();
+		$theme_step_data["theme-styles"]["styles"] = count(\WP_Theme_JSON_Resolver::get_style_variations()) + 1;
+		return $theme_step_data;
+	}
+
 } // END \NewfoldLabs\WP\Module\Onboarding\Data()

includes/Data/Patterns.php

@@ -10,16 +10,44 @@ final class Patterns
      protected static $theme_step_patterns = array(
           'yith-wonder' => array(
                'theme-styles' => array(
-                    'site-header-left-logo-navigation-inline',
-                    'homepage-1',
-                    'site-footer',
+                    'site-header-left-logo-navigation-inline' => array(
+                         'active',
+                         'selected'
+                    ),
+                    'homepage-1' => array(
+                         'active',
+                         'selected',
+                         'shown'
+                    ),
+                    'site-footer' => array(
+                         'active',
+                         'selected'
+                    ),
                ),
                'homepage-styles' => array(
-                    'site-header-left-logo-navigation-inline',
-                    'homepage-1',
-                    'homepage-2',
-                    'homepage-3',
-                    'site-footer',
+                    'site-header-left-logo-navigation-inline' => array(
+                         'active',
+                         'selected'
+                    ),
+                    'homepage-1' => array(
+                         'active',
+                         'selected',
+                         'shown'
+                    ),
+                    'homepage-2' => array(
+                         'active',
+                         'selected',
+                         'shown'
+                    ),
+                    'homepage-3' => array(
+                         'active',
+                         'selected',
+                         'shown'
+                    ),
+                    'site-footer' => array(
+                         'active',
+                         'selected'
+                    ),
                ),
           ),
      );
@@ -69,7 +97,7 @@ public static function get_theme_step_patterns_from_step($step, $squash = false)
           $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance();
           $block_patterns          = array();
           $block_patterns_squashed = '';
-          foreach ($pattern_slugs as $pattern_slug) {
+          foreach ($pattern_slugs as $pattern_slug=>$i) {
                $pattern_name = $active_theme . '/' . $pattern_slug;
                if ($block_patterns_registry->is_registered($pattern_name)) {
                     $pattern = $block_patterns_registry->get_registered($pattern_name);
@@ -175,4 +203,26 @@ public static function set_theme_step_patterns($step, $slug)
                     );
           }
      }
+
+     public static function get_count_of_patterns() {
+
+          $active_theme  = (\wp_get_theme())->get('TextDomain');
+          $theme_steps   = self::$theme_step_patterns[$active_theme];
+
+          $theme_pattern_count = array();
+          foreach ($theme_steps as $theme_step => $patterns) {
+               $theme_step_count = 0;
+               foreach ($patterns as $pattern => $pattern_data) {
+                    foreach ($pattern_data as $property) {
+                         if($property === 'shown')
+                              $theme_step_count += 1;
+                    }
+               }
+               $theme_pattern_count[$theme_step] = array(
+                    'styles'    => 1,
+                    'patterns' => $theme_step_count
+               );
+          }
+          return $theme_pattern_count;
+     }
 }

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js

@@ -13,6 +13,7 @@ import {
 
 const DesignThemeStylesPreview = () => {
 	const MAX_PREVIEWS_PER_ROW = 3;
+
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ pattern, setPattern ] = useState();
 	const [ globalStyles, setGlobalStyles ] = useState();
@@ -36,6 +37,10 @@ const DesignThemeStylesPreview = () => {
 		updateThemeStatus,
 	} = useDispatch( nfdOnboardingStore );
 
+	const THEME_VARIATIONS
+		= window.nfdOnboarding.themeStepData[currentStep.patternId].styles
+		* window.nfdOnboarding.themeStepData[currentStep.patternId].patterns;
+
 	const getStylesAndPatterns = async () => {
 		const patternResponse = await getPatterns(
 			currentStep.patternId,
@@ -91,6 +96,25 @@ const DesignThemeStylesPreview = () => {
 		setCurrentOnboardingData( currentData );
 	};
 
+	const buildDummyPreviews = () => {
+		let dummyPreview = [];
+
+		for (let i = 0; i < THEME_VARIATIONS; i++) {
+			dummyPreview.push(
+				<LivePreviewSelectableCard
+					key={i}
+					className={'theme-styles-preview--drawer__list__item'}
+					blockGrammer={''}
+					viewportWidth={900}
+					styling={'custom'}
+					skeletonLoadingTime={4000}
+				/>
+			);
+		}
+
+		return dummyPreview;
+	};
+
 	const buildPreviews = () => {
 		return globalStyles?.map( ( globalStyle, idx ) => {
 			return (
@@ -112,17 +136,22 @@ const DesignThemeStylesPreview = () => {
 	return (
 		<div className="theme-styles-preview--drawer">
 			<div className="theme-styles-preview--drawer__list">
+				{!globalStyles
+					&& buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)}
 				{ globalStyles
-					? buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )
-					: '' }
+					&& buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
 			</div>
 			<div className="theme-styles-preview--drawer__list">
+				{!globalStyles
+					&& buildDummyPreviews().slice(
+						MAX_PREVIEWS_PER_ROW,
+						THEME_VARIATIONS
+					)}
 				{ globalStyles
-					? buildPreviews().slice(
+					&& buildPreviews().slice(
 							MAX_PREVIEWS_PER_ROW,
 							globalStyles.length
-					  )
-					: '' }
+					  ) }
 			</div>
 		</div>
 	);

src/OnboardingSPA/pages/Steps/DesignColors/index.js

@@ -84,6 +84,13 @@ const StepDesignColors = () => {
 					</div>
 				</div>
 				<div className="theme-colors-preview__live-preview-container">
+					{!pattern && (
+						<LivePreview
+							blockGrammer={''}
+							styling={'custom'}
+							viewportWidth={1300}
+						/>
+					)}
 					{pattern && (
 						<LivePreview
 							blockGrammer={pattern}

src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js

@@ -70,6 +70,10 @@ const StepDesignHomepageMenu = () => {
 		updateThemeStatus,
 	} = useDispatch( nfdOnboardingStore );
 
+	const THEME_VARIATIONS
+		= window.nfdOnboarding.themeStepData[currentStep.patternId].styles
+			* window.nfdOnboarding.themeStepData[currentStep.patternId].patterns;
+
 	useEffect( () => {
 		if ( isLargeViewport ) {
 			setIsDrawerOpened( true );
@@ -156,6 +160,25 @@ const StepDesignHomepageMenu = () => {
 		}
 	}, [ isLoaded, themeStatus ] );
 
+	const buildDummyPreviews = () => {
+		let dummyPreview = [];
+
+		for (let i = 0; i < THEME_VARIATIONS; i++) {
+			dummyPreview.push(
+				<LivePreviewSelectableCard
+					key={i}
+					className={'homepage_preview__list__item'}
+					blockGrammer={''}
+					viewportWidth={900}
+					styling={'custom'}
+					skeletonLoadingTime={4000}
+				/>
+			);
+		}
+
+		return dummyPreview;
+	};
+
 	function buildHomepagePreviews() {
 		return homepagePattern?.map( ( homepage, idx ) => {
 			if ( homepage ) {
@@ -186,6 +209,7 @@ const StepDesignHomepageMenu = () => {
 						subtitle={ currentStep?.subheading }
 					/>
 					<div className="theme-styles-menu__list">
+						{ !globalStyle && buildDummyPreviews() }
 						{ globalStyle && buildHomepagePreviews() }
 					</div>
 				</div>

src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js

@@ -48,6 +48,10 @@ const StepDesignThemeStylesMenu = () => {
 		};
 	}, [] );
 
+	const THEME_VARIATIONS 
+			= window.nfdOnboarding.themeStepData[currentStep.patternId].styles 
+				* window.nfdOnboarding.themeStepData[currentStep.patternId].patterns;
+
 	const {
 		setDrawerActiveView,
 		setIsDrawerOpened,
@@ -101,6 +105,25 @@ const StepDesignThemeStylesMenu = () => {
 		navigate( nextStep.path );
 	};
 
+	const buildDummyPreviews = () => {
+		let dummyPreview = [];
+
+		for (let i = 0; i < THEME_VARIATIONS; i++) {
+			dummyPreview.push(
+				<LivePreviewSelectableCard
+					key={i}
+					className={'theme-styles-menu__list__item'}
+					blockGrammer={''}
+					viewportWidth={900}
+					styling={'custom'}
+					skeletonLoadingTime={3000}
+				/>
+			);
+		}
+
+		return dummyPreview;
+	};
+
 	const buildPreviews = () => {
 		return globalStyles?.map( ( globalStyle, idx ) => {
 			return (
@@ -118,7 +141,7 @@ const StepDesignThemeStylesMenu = () => {
 			);
 		} );
 	};
-
+	
 	return (
 		<DesignStateHandler>
 			<CommonLayout>
@@ -128,15 +151,21 @@ const StepDesignThemeStylesMenu = () => {
 						subtitle={ currentStep?.subheading }
 					/>
 					<div className="theme-styles-menu__list">
+						{!globalStyles && buildDummyPreviews().slice(0, MAX_PREVIEWS_PER_ROW)}
 						{ globalStyles &&
-							buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW ) }
+							buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )}
 					</div>
 					<div className="theme-styles-menu__list">
+						{!globalStyles &&
+							buildDummyPreviews().slice(
+								MAX_PREVIEWS_PER_ROW,
+								THEME_VARIATIONS
+							)}
 						{ globalStyles &&
 							buildPreviews().slice(
 								MAX_PREVIEWS_PER_ROW,
 								globalStyles.length
-							) }
+							)}
 					</div>
 				</div>
 			</CommonLayout>

src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js

@@ -220,6 +220,13 @@ const StepDesignThemeStylesPreview = () => {
 					</div>
 				</div>
 				<div className="theme-styles-preview__live-preview-container">
+					{ !pattern && (
+						<LivePreview
+							blockGrammer={''}
+							styling={'custom'}
+							viewportWidth={1300}
+						/>
+					)}
 					{ pattern && (
 						<LivePreview
 							blockGrammer={ pattern }

src/OnboardingSPA/store/actions.js

@@ -12,6 +12,7 @@ export function setRuntime( runtime ) {
 		siteUrl: runtime.siteUrl,
 		migrated: true,
 		currentFlow: runtime.currentFlow ?? 'wp-setup',
+		themeStepData: runtime.themeStepData,
 	};
 	return {
 		type: 'SET_RUNTIME',