Merge pull request #104 from newfold-labs/PRESS2-335-Fix-the-Blank-Sp…

…ace-before-Theme-Skeleton-spins-up PRESS2 335 Fix the blank space before theme skeleton spins up
newfold-labs · Nov 29, 2022 · e9eea11 · e9eea11
2 parents 1e0dbbe + 6057961
commit e9eea11
Show file tree

Hide file tree

Showing 20 changed files with 272 additions and 106 deletions.
diff --git a/includes/Data/Data.php b/includes/Data/Data.php
@@ -21,7 +21,10 @@ public static function runtime() {
 			'currentPlan'       => self::current_plan(),
 			'currentFlow'       => self::current_flow(),
 			'pluginInstallHash' => Permissions::rest_get_plugin_install_hash(),
-			'previewSettings'   => Preview::get_settings(),
+			'previewSettings'   => array(
+				'settings'        => Preview::get_settings(),
+				'stepPreviewData' => Themes::step_preview_data(),
+			),
 		);
 	}
 
@@ -105,4 +108,5 @@ public static function customer_data() {
 		}
 		 return array();
 	}
+
 } // END \NewfoldLabs\WP\Module\Onboarding\Data()
diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php
@@ -14,7 +14,9 @@ protected static function get_theme_step_patterns() {
 						'active' => true,
 					),
 					'homepage-1'  => array(
-						'active' => true,
+						'active'  => true,
+						'shown'   => true,
+						'combine' => true,
 					),
 					'site-footer' => array(
 						'active' => true,
@@ -26,12 +28,15 @@ protected static function get_theme_step_patterns() {
 					),
 					'homepage-1'  => array(
 						'active' => true,
+						'shown'  => true,
 					),
 					'homepage-2'  => array(
 						'active' => true,
+						'shown'  => true,
 					),
 					'homepage-3'  => array(
 						'active' => true,
+						'shown'  => true,
 					),
 					'site-footer' => array(
 						'active' => true,
@@ -42,24 +47,28 @@ protected static function get_theme_step_patterns() {
 						'active'      => true,
 						'title'       => 'About',
 						'selected'    => true,
+						'shown'       => true,
 						'description' => __( 'Explain your company values or the history behind your brand.', 'wp-module-onboarding' ),
 					),
 					'contact-us'        => array(
 						'active'      => true,
 						'selected'    => true,
 						'title'       => 'Contact',
+						'shown'       => true,
 						'description' => __( 'Offer visitors a single page with a contact form, your street address and social media.', 'wp-module-onboarding' ),
 					),
 					'testimonials-page' => array(
 						'active'      => true,
 						'title'       => 'Testimonials',
 						'selected'    => false,
+						'shown'       => true,
 						'description' => __( 'Highlight your success with testimonials from your fans.', 'wp-module-onboarding' ),
 					),
 					'blog-page'         => array(
 						'active'      => true,
 						'selected'    => true,
 						'title'       => 'Blog',
+						'shown'       => true,
 						'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ),
 					),
 				),
@@ -140,7 +149,7 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false
 	  *
 	  * @return \WP_REST_Response|\WP_Error
 	  */
-	public function set_homepage_patterns( $slug ) {
+	public static function set_homepage_patterns( $slug ) {
 
 		if ( ! isset( $slug ) ) {
 			return new \WP_Error(
@@ -218,4 +227,29 @@ public static function set_theme_step_patterns( $step, $slug ) {
 				);
 		}
 	}
+
+	public static function get_count_of_patterns() {
+		 $active_theme          = ( \wp_get_theme() )->get( 'TextDomain' );
+		 $theme_step_patterns   = self::get_theme_step_patterns();
+		 $active_theme_patterns = isset( $theme_step_patterns[ $active_theme ] ) ? $theme_step_patterns[ $active_theme ] : array();
+
+		 $theme_pattern_count = array();
+		foreach ( $active_theme_patterns as $theme_step => $patterns ) {
+				$theme_step_count  = 0;
+				$combine_styles    = 1;
+			foreach ( $patterns as $pattern => $pattern_data ) {
+				if ( isset( $pattern_data['shown'] ) && $pattern_data['shown'] === true ) {
+						  $theme_step_count += 1;
+				}
+				if ( isset( $pattern_data['combine'] ) && $pattern_data['combine'] === true ) {
+					 $combine_styles = count( \WP_Theme_JSON_Resolver::get_style_variations() ) + 1;
+				}
+			}
+
+			   $theme_pattern_count[ $theme_step ] = array(
+				   'previewCount' => $combine_styles * $theme_step_count,
+			   );
+		}
+		 return $theme_pattern_count;
+	}
 }
diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php
@@ -73,6 +73,16 @@ private static function check_approved( $value ) {
 		 return $value['approved'] === true;
 	}
 
+	 /**
+	  * Get the current theme data like the theme variations and previews per step
+	  *
+	  * @return array
+	  */
+	public static function step_preview_data() {
+		$theme_step_data   = Patterns::get_count_of_patterns();
+		return $theme_step_data;
+	}
+
 	 /**
 	  * Get the list of initial themes to be installed for a particular hosting plan.
 	  *

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -1,6 +1,7 @@
 <?php
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
+use NewfoldLabs\WP\Module\Onboarding\Data\Patterns;
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
 use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 
@@ -90,7 +91,7 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 		$default = $request->get_param( 'variations' );
 
 		// If there exists an old Custom Theme then return that
-		if ( 'false' === $default && false !== \get_option( Options::get_option_name( 'theme_settings' ) ) ) {
+		if ( false === $default && false !== \get_option( Options::get_option_name( 'theme_settings' ) ) ) {
 			return array(
 				\get_option( Options::get_option_name( 'theme_settings' ) ),
 			);

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
@@ -1,7 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
-import { LivePreviewSelectableCard } from '../../LivePreview';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getPatterns } from '../../../utils/api/patterns';
 import { getGlobalStyles } from '../../../utils/api/themes';
@@ -10,15 +9,20 @@ import {
 	THEME_STATUS_ACTIVE,
 	THEME_STATUS_NOT_ACTIVE,
 } from '../../../../constants';
+import {
+	LivePreviewSelectableCard,
+	LivePreviewSkeleton,
+} from '../../LivePreview';
 
 const DesignThemeStylesPreview = () => {
 	const MAX_PREVIEWS_PER_ROW = 3;
+
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ pattern, setPattern ] = useState();
 	const [ globalStyles, setGlobalStyles ] = useState();
 	const [ selectedStyle, setSelectedStyle ] = useState( '' );
 
-	const { currentStep, currentData, storedPreviewSettings, themeStatus } =
+	const { currentStep, currentData, storedPreviewSettings, themeStatus, themeVariations, } =
 		useSelect( ( select ) => {
 			return {
 				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
@@ -27,6 +31,7 @@ const DesignThemeStylesPreview = () => {
 				storedPreviewSettings:
 					select( nfdOnboardingStore ).getPreviewSettings(),
 				themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+				themeVariations: select(nfdOnboardingStore).getStepPreviewData(),
 			};
 		}, [] );
 
@@ -112,17 +117,12 @@ const DesignThemeStylesPreview = () => {
 	return (
 		<div className="theme-styles-preview--drawer">
 			<div className="theme-styles-preview--drawer__list">
-				{ globalStyles
-					? buildPreviews().slice( 0, MAX_PREVIEWS_PER_ROW )
-					: '' }
-			</div>
-			<div className="theme-styles-preview--drawer__list">
-				{ globalStyles
-					? buildPreviews().slice(
-							MAX_PREVIEWS_PER_ROW,
-							globalStyles.length
-					  )
-					: '' }
+				<LivePreviewSkeleton
+					className={ 'theme-styles-preview--drawer__list__item' }
+					watch={ globalStyles && pattern }
+					count={ themeVariations[currentStep?.patternId]?.previewCount }
+					callback={ buildPreviews }
+					viewportWidth={ 900 }/>
 			</div>
 		</div>
 	);

diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js
@@ -0,0 +1,73 @@
+import { useState, useEffect } from '@wordpress/element';
+
+import { LivePreviewSelectableCard, LivePreviewSelectableCardWithInfo } from '..';
+
+/**
+ * Renders Skeletons for Live Previews.
+ *
+ * @property {number} count                     The number of Live Previews to be shown
+ * @property {number} watch                     The variable to be awaited for
+ * @property {string} callback                  The Render function in parent to be called
+ * @property {string} className                 The class name for the Live Preview
+ * @property {number} viewportWidth             Viewport Width for the Live Preview
+ * 
+ */
+const LivePreviewSkeleton = ( {
+	count,
+	watch,
+	callback,
+	className,
+	viewportWidth,
+	isWithCard = false,
+} ) => {
+
+	const MAX_ANIMATION_TIME = 600000;
+	const [rerender, doRerender] = useState(0);
+
+	useEffect(() => doRerender(1), [watch]);
+
+	const buildDummyPreviews = () => {
+		const dummyPreviews = [];
+
+		for ( let i = 0; i < count; i++ ) {
+			dummyPreviews.push(
+				<LivePreviewSelectableCard
+					key={ i }
+					blockGrammer={ '' }
+					styling={ 'custom' }
+					className={ className }
+					skeletonLoadingTime={ MAX_ANIMATION_TIME }
+					viewportWidth={ viewportWidth }
+				/>
+			);
+		}
+		return dummyPreviews;
+	};
+
+	const buildDummyPreviewsWithInfo = () => {
+		const dummyPreviews = [];
+
+		for (let i = 0; i < count; i++) {
+			dummyPreviews.push(
+				<LivePreviewSelectableCardWithInfo
+						key={ i }
+						className={ className }
+						blockGrammer={ '' }
+						viewportWidth={ 1200 }
+						styling={ 'custom' }
+						title={ 'Loading...' }
+						description={'Loading...'}
+					/>
+			);
+		}
+		return dummyPreviews;
+	};
+
+	return !watch ? (isWithCard ? buildDummyPreviewsWithInfo() : buildDummyPreviews()) : 
+			<>
+				{watch ? <div style={{ display: 'none' }}>{rerender}</div> : null}
+				{callback()}
+			</>;
+};
+
+export default LivePreviewSkeleton;
diff --git a/src/OnboardingSPA/components/LivePreview/index.js b/src/OnboardingSPA/components/LivePreview/index.js
@@ -1,4 +1,5 @@
 export { default as LivePreview } from './BlockPreview';
+export { default as LivePreviewSkeleton } from './LivePreviewSkeleton';
 export { default as LivePreviewSelectableCard } from './SelectableCard';
 export { default as LivePreviewSelectableCardWithInfo } from './SelectableCardWithInfo';
 export { default as GlobalStylesProvider } from './GlobalStylesProvider';
diff --git a/src/OnboardingSPA/index.js b/src/OnboardingSPA/index.js
@@ -42,13 +42,13 @@ export async function initializeNFDOnboarding( id, runtime ) {
 
 	const DOM_TARGET = document.getElementById( id );
 	dispatch( nfdOnboardingStore ).setRuntime( runtime );
-	if ( runtime.previewSettings.preRequisites?.themes ) {
+	if ( runtime.previewSettings.settings.preRequisites?.themes ) {
 		dispatch( nfdOnboardingStore ).updateThemeStatus(
-			runtime.previewSettings.preRequisites?.themes[ DESIGN_STEPS_THEME ]
+			runtime.previewSettings.settings.preRequisites?.themes[ DESIGN_STEPS_THEME ]
 		);
 	}
 	dispatch( nfdOnboardingStore ).updatePluginsStatus(
-		runtime.previewSettings.preRequisites?.plugins
+		runtime.previewSettings.settings.preRequisites?.plugins
 	);
 	const currentData = await getFlow();
 	if ( currentData.error == null ) {

diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -23,19 +23,25 @@ const StepDesignColors = () => {
 	const [ pattern, setPattern ] = useState();
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { currentStep } = useSelect( ( select ) => {
-		return {
-			currentStep: select( nfdOnboardingStore ).getStepFromPath(
-				location.pathname
-			),
-		};
-	}, [] );
+	const { currentStep, currentData } = useSelect(
+		( select ) => {
+			return {
+				currentStep: select( nfdOnboardingStore ).getStepFromPath(
+					location.pathname
+				),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			};
+		},
+		[]
+	);
 
 	const {
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
+
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -72,6 +78,13 @@ const StepDesignColors = () => {
 						</div>
 					</div>
 					<div className="theme-colors-preview__live-preview-container">
+						{ ! pattern && (
+							<LivePreview
+								blockGrammer={ '' }
+								styling={ 'custom' }
+								viewportWidth={ 1300 }
+							/>
+						) }
 						{ pattern && (
 							<LivePreview
 								blockGrammer={ pattern }