fix preview when loading

Author: kaeizen

src/components/design-library-list/design-library-list-item.js

@@ -46,7 +46,7 @@ const DesignLibraryListItem = memo( props => {
 	const {
 		blocks, enableBackground,
 		shadowBodySizeRef, blocksForSubstitutionRef,
-		previewSize, cardHeight, onClickDesign,
+		previewSize, onClickDesign,
 		updateShadowBodySize,
 	} = usePreviewRenderer( props, shouldRender, spacingSize,
 		ref, hostRef, shadowRoot, setIsLoading )
@@ -56,17 +56,16 @@ const DesignLibraryListItem = memo( props => {
 	} = useAutoScroll( hostRef, shadowBodySizeRef, selectedTab )
 
 	const getDesignPreviewSize = () => {
-		return selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
+		const tempHeight = selectedTab === 'pages' ? 345 : 100
+
+		const previewHeight = selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
 			: ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground )
-	}
 
-	const getCardHeight = () => {
-		const key = props.enableBackground ? 'background' : 'noBackground'
-		return cardHeight?.[ key ] ?? ( props.selectedTab === 'pages' ? 413 : 250 )
-	}
+		if ( ! blocks || ! previewHeight ) {
+			return tempHeight
+		}
 
-	if ( ! shouldRender && ! props.selectedNum ) {
-		return <div style={ { height: `${ getCardHeight() }px` } } />
+		return previewHeight
 	}
 
 	const mainClasses = classnames( [
@@ -103,18 +102,18 @@ const DesignLibraryListItem = memo( props => {
 						showHideNote={ false }
 					/>
 				) }
-				<div className={ `stk-spinner-container ${ isLoading ? '' : 'stk-hide-spinner' }` }><Spinner /></div>
+				<div className={ `stk-spinner-container ${ isLoading || ! shouldRender ? '' : 'stk-hide-spinner' }` }><Spinner /></div>
 				<div
 					className="stk-block-design__host-container"
 					style={ {
 						transform: `scale(${ selectedNum && selectedData ? selectedData.selectedPreviewSize.scale : previewSize?.scale })`,
 						transformOrigin: 'top left',
-						height: ! blocks ? ( selectedTab === 'pages' ? 345 : 100 ) : getDesignPreviewSize(),
+						height: getDesignPreviewSize(),
 					} }
 				>
 					<div className="stk-block-design__host" ref={ hostRef }>
-						{ shadowRoot && <DesignPreview
-							blocks={ blocks }
+						{ shouldRender && shadowRoot && <DesignPreview
+							blocks={ blocks }s
 							shadowRoot={ shadowRoot }
 							selectedTab={ selectedTab }
 							designIndex={ props.designIndex }

src/components/design-library-list/design-preview.js

@@ -88,18 +88,20 @@ export const DesignPreview = ( {
 			return
 		}
 
+		setIsLoading( true )
+
 		const ric = window.requestIdleCallback || ( cb => setTimeout( cb, designIndex * 20 ) )
 		const sanitizedHTML = safeHTML( blocks )
 
 		if ( selectedTab !== 'pages' || designIndex < 9 ) {
 			// insert HTML for patterns and for the first 9 pages
 			wrapper.innerHTML = sanitizedHTML
-			// No need to call setIsLoading(false) here; isLoading is already false at this point.
+			requestAnimationFrame( () => {
+				ric( () => setIsLoading( false ) )
+			} )
 			return
 		}
 
-		setIsLoading( true )
-
 		requestAnimationFrame( () => {
 			ric( () => {
 				wrapper.innerHTML = sanitizedHTML

src/components/design-library-list/editor.scss

@@ -234,17 +234,10 @@
 		transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.4, 1);
   		will-change: opacity;
 		opacity: 1;
+		display: flex;
 		&.stk-hide-spinner {
 			opacity: 0;
 		}
-		.components-spinner {
-			display: block;
-			margin: 50px auto;
-		}
-	}
-
-	&.stk-design-library__item-pages .stk-spinner-container {
-		display: flex;
 		.components-spinner {
 			margin: auto;
 		}

src/components/design-library-list/index.js

@@ -102,6 +102,9 @@ const DesignLibraryItem = props => {
 	const presetMarks = useMemo( () => getPresetMarks() || null, [] )
 
 	useEffect( () => {
+		if ( selectedTab !== 'pages' ) {
+			return
+		}
 		let id
 		if ( typeof requestIdleCallback !== 'undefined' ) {
 			id = requestIdleCallback( () => ! shouldRender ? setShouldRender( true ) : {} )
@@ -117,7 +120,7 @@ const DesignLibraryItem = props => {
 				clearTimeout( id )
 			}
 		}
-	}, [] )
+	}, [ selectedTab ] )
 
 	useEffect( () => {
 		if ( selectedTab === 'pages' ) {

src/components/design-library-list/use-preview-renderer.js

@@ -56,7 +56,6 @@ export const usePreviewRenderer = (
 	const [ content, setContent ] = useState( '' )
 	const [ contentForInsertion, setContentForInsertion ] = useState( null )
 
-	const [ cardHeight, setCardHeight ] = useState( {} )
 	const [ previewSize, setPreviewSize ] = useState( {} )
 
 	const categoriesRef = useRef( [] )
@@ -142,21 +141,6 @@ export const usePreviewRenderer = (
 			updateShadowBodySize( shadowBody )
 		}
 
-		// Update card height more efficiently
-		setCardHeight( prev => {
-			const newCardHeight = { ...prev }
-
-			if ( ! Object.keys( prev ).length ) {
-				newCardHeight.background = cardRect.height
-				newCardHeight.noBackground = cardRect.height
-			} else {
-				const CardHeightKey = enableBackground ? 'background' : 'noBackground'
-				newCardHeight[ CardHeightKey ] = cardRect.height
-			}
-
-			return newCardHeight
-		} )
-
 		if ( adjustAnimateFrameRef.current !== null ) {
 			cancelAnimationFrame( adjustAnimateFrameRef.current )
 		}
@@ -389,7 +373,7 @@ export const usePreviewRenderer = (
 	return {
 		blocks: blocks.serialized, enableBackground,
 		shadowBodySizeRef, blocksForSubstitutionRef,
-		previewSize, cardHeight, onClickDesign,
+		previewSize, onClickDesign,
 		updateShadowBodySize,
 	}
 }