PRESS 2-230 Live Preview Component Skeleton State

src/OnboardingSPA/components/Drawer/stylesheet.scss

@@ -273,7 +273,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
                     }
 
                     &--selected {
-                        z-index: 1;
+                        z-index: 2;
                         width: 40px;
                         height: 40px;
                         display: flex;
@@ -298,6 +298,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
                 &__live-preview-container {
                     position: relative;
                     width: 90%;
+                    overflow: hidden;
                     align-items: center;
                     border: 1px solid #B7B7B7;
 

src/OnboardingSPA/components/LivePreview/BlockPreview/index.js

@@ -16,18 +16,39 @@ import { store as nfdOnboardingStore } from '../../../store';
  * @param             root0.viewportWidth
  * @param             root0.styling
  * @param             root0.previewSettings
- * @property {string} blockGrammer          WordPress block grammer.
- * @property {number} viewportWidth         Set viewport width for the AutoHeightBlockPreview component.
- * @property {string} styling               The type of styling to be applied (small, large, custom).
+ * @param             root0.setIsLoadingParent
+ * @param             root0.skeletonLoadingTime
+ * @property {string} blockGrammer              WordPress block grammer.
+ * @property {number} viewportWidth             Set viewport width for the AutoHeightBlockPreview component.
+ * @property {string} styling                   The type of styling to be applied (small, large, custom).
  */
 const BlockPreview = ( {
 	blockGrammer,
 	viewportWidth = 1300,
 	styling = 'large',
+	setIsLoadingParent = false,
 	previewSettings = false,
+	skeletonLoadingTime = 2500,
 } ) => {
 	const [ blocks, setBlocks ] = useState();
 	const [ settings, setSettings ] = useState();
+	const [ loading, setIsLoading ] = useState( true );
+
+	useEffect( () => {
+		if ( skeletonLoadingTime ) {
+			const timer = setTimeout( () => {
+				setIsLoading( false );
+				if ( setIsLoadingParent ) {
+					setIsLoadingParent( false );
+				}
+			}, skeletonLoadingTime );
+			return () => clearTimeout( timer );
+		}
+		setIsLoading( false );
+		if ( setIsLoadingParent ) {
+			setIsLoadingParent( false );
+		}
+	}, [ skeletonLoadingTime ] );
 
 	const storedPreviewSettings = useSelect(
 		( select ) => select( nfdOnboardingStore ).getPreviewSettings(),
@@ -54,6 +75,15 @@ const BlockPreview = ( {
 
 	return (
 		<div className={ `live-preview__container-${ styling }` }>
+			{ loading &&
+				<div className="live-preview__container--is-skeleton">
+					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-header">
+						<div className={ `live-preview__container--is-skeleton--shimmer` } />
+					</div>
+					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-1" />
+					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-2" />
+					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-footer" />
+				</div> }
 			{ settings && (
 				<BlockEditorProvider
 					value={ blocks }

src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss

@@ -1,19 +1,73 @@
+$main-color-grey: var(--nfd-onboarding-light-gray);
+$main-color-grey-other: #e2e2e2;
+$main-color-light-rgb: var(--nfd-onboarding-white-rgb);
+
 .live-preview {
 
 	&__container {
 
 		&-small {
 			width: 70%;
 			height: 70%;
+			overflow: hidden;
 			max-width: 320px;
 			max-height: 320px;
 		}
-
+		
 		&-large {
 			width: 70%;
 			height: 70%;
+			overflow: hidden;
 			max-width: 925px;
 			max-height: 925px;
 		}
+
+		&--is-skeleton {
+			z-index: 1;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			position: absolute;
+			align-items: center;
+			flex-direction: column;
+			background-color: $main-color-grey;
+
+			&--box {
+				width: 90%;
+				margin: 12px;
+				background: $main-color-grey-other;
+
+				&-header {
+					height: 10%;
+				}
+
+				&-body-1 {
+					height: 40%;
+				}
+
+				&-body-2 {
+					height: 15%;
+				}
+
+				&-footer {
+					height: 5%;
+				}
+			}
+
+			&--shimmer {
+				z-index: 2;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				background-image: linear-gradient(90deg,
+						rgba($main-color-light-rgb, 0) 0,
+						rgba($main-color-light-rgb, 0.4) 20%,
+						rgba($main-color-light-rgb, 0.6) 60%,
+						rgba($main-color-light-rgb, 0.4) 90%,
+						rgba($main-color-light-rgb, 0.02) 100%,
+						$main-color-grey);
+				animation: shine 1.5s linear infinite;
+			}
+		}
 	}
 }

src/OnboardingSPA/components/LivePreview/SelectableCard/index.js

@@ -1,4 +1,5 @@
 import { check, search, Icon } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
 
 import { LivePreview } from '..';
 
@@ -11,11 +12,18 @@ const SelectableCard = ( {
 	previewSettings,
 	overlay = false,
 	onClick = false,
+	skeletonLoadingTime = 2500,
 } ) => {
+	const [ loadingParent, setIsLoadingParent ] = useState( true );
+
 	return (
 		<div
 			className={ `${ className }` }
-			onClick={ typeof onClick === 'function' && ( () => onClick() ) }
+			onClick={ typeof onClick === 'function' && ( () => {
+				if ( ! loadingParent ) {
+					onClick();
+				}
+			} ) }
 		>
 			<div className={ `${ className }__title-bar` }>
 				<div className={ `${ className }__title-bar__browser` }>
@@ -30,10 +38,9 @@ const SelectableCard = ( {
 					></span>
 				</div>
 				<div
-					className={ `${
-						selected
-							? `${ className }__title-bar--selected`
-							: `${ className }__title-bar--unselected`
+					className={ `${ selected
+						? `${ className }__title-bar--selected live-preview-selected-check`
+						: `${ className }__title-bar--unselected`
 					}` }
 				>
 					<Icon
@@ -45,10 +52,12 @@ const SelectableCard = ( {
 			</div>
 			<div className={ `${ className }__live-preview-container` }>
 				<LivePreview
+					styling={ styling }
 					blockGrammer={ blockGrammer }
 					viewportWidth={ viewportWidth }
-					styling={ styling }
 					previewSettings={ previewSettings }
+					setIsLoadingParent={ setIsLoadingParent }
+					skeletonLoadingTime={ skeletonLoadingTime }
 				/>
 				{ overlay && (
 					<div

src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss

@@ -9,6 +9,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 	width: 100%;
 	margin: 24px;
 	display: flex;
+	overflow: hidden;
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
@@ -38,7 +39,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 		}
 
 		&--selected {
-			z-index: 1;
+			z-index: 2;
 			width: 40px;
 			height: 40px;
 			display: flex;
@@ -63,13 +64,13 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 	&__live-preview-container {
 		position: relative;
 		width: 90%;
+		overflow: hidden;
 		align-items: center;
 		border: 1px solid #e3dfdf;
 
 		.live-preview {
 
 			&__container {
-
 				&-custom {
 					width: 100%;
 					overflow: hidden;
@@ -109,3 +110,5 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 		}
 	}
 }
+
+

src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss

@@ -58,7 +58,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
                     }
 
                     &--selected {
-                        z-index: 1;
+                        z-index: 2;
                         width: 40px;
                         height: 40px;
                         display: flex;

src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss

@@ -58,7 +58,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 				}
 
 				&--selected {
-					z-index: 1;
+					z-index: 2;
 					width: 40px;
 					height: 40px;
 					display: flex;
@@ -83,6 +83,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 			&__live-preview-container {
 				position: relative;
 				width: 90%;
+				overflow: hidden;
 				align-items: center;
 				border: 1px solid #e3dfdf;
 

src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss

@@ -84,8 +84,10 @@
 	}
 
 	&__live-preview-container {
-		position: relative;
 		width: 70%;
+		min-height: 80vh;
+		overflow: hidden;
+		position: relative;
 		align-items: center;
 		border: 1px solid #e3dfdf;
 		margin-bottom: 30px;

src/OnboardingSPA/styles/_interface.scss

@@ -24,6 +24,7 @@ body {
     --nfd-onboarding-light: #f2f2f2; 
     --nfd-onboarding-dark: #1e2223;
     --nfd-onboarding-white: #ffffff;
+    --nfd-onboarding-white-rgb: 255, 255, 255;
     --nfd-onboarding-black: #000000;
     --nfd-onboarding-header-bg: var(--nfd-onboarding-light);
     --nfd-onboarding-header-fg: var(--nfd-onboarding-dark);

src/OnboardingSPA/styles/_utilities.scss

@@ -6,6 +6,14 @@
 		opacity: 1;
 	}
 }
+@keyframes shine {
+	0% {
+			transform: translateX(-100%);
+		}
+	100% {
+			transform: translateX(100%);
+		}
+}
 
 .is-centered {
 	display: flex;