From b5267af61744beb2ac194f2578830385b119e98c Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 12 Jan 2023 17:49:36 +0530
Subject: [PATCH] Refactored Skeleton to be a React.memo component

---
 .../LivePreview/BlockPreview/index.js         | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
index f9fdee0a2..6ae00f11d 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { parse } from '@wordpress/blocks';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, memo } from '@wordpress/element';
 
 import AutoHeightBlockPreview from './auto';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
@@ -75,18 +75,24 @@ const BlockPreview = ( {
 		}
 	}, [ storedPreviewSettings ] );
 
+	const SkeletonLivePreview = memo(() => {
+		return (
+			<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>
+		);
+	});
+
+	console.count('Rendered');
+	
 	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> 
-			)}
+			{ loading && <SkeletonLivePreview/> }
 			{ settings && (
 				<BlockEditorProvider
 					value={ blocks }