fix (design library): design preview scale adjustment

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

@@ -46,18 +46,22 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 	const {
 		blocks, enableBackground,
 		shadowBodySizeRef, blocksForSubstitutionRef,
-		adjustScale, onClickDesign,
+		onClickDesign,
 	} = usePreviewRenderer(
 		previewProps, previewSize, plan, spacingSize,
 		selectedTab, selectedNum, selectedData,
-		ref, shadowRoot, setIsLoading
+		ref, hostRef, shadowRoot, setIsLoading,
 	)
 
 	const {
 		onMouseOut, onMouseOver, onMouseDown,
 	} = useAutoScroll( hostRef, shadowBodySizeRef, selectedTab )
 
 	const getDesignPreviewSize = () => {
+		if ( ! shadowRoot || isLoading ) {
+			return 0
+		}
+
 		return selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
 			: ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground )
 	}
@@ -106,11 +110,10 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 					} }
 				>
 					<div className="stk-block-design__host" ref={ hostRef }>
-						{ shadowRoot && <DesignPreview
+						{ shadowRoot && ! isLoading && <DesignPreview
 							blocks={ blocks }
 							shadowRoot={ shadowRoot }
 							selectedTab={ selectedTab }
-							adjustScale={ adjustScale }
 							onMouseDown={ onMouseDown }
 						/> }
 					</div>

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

@@ -13,7 +13,6 @@ export const DesignPreview = ( {
 	blocks = '',
 	shadowRoot,
 	selectedTab,
-	adjustScale = NOOP,
 	onMouseDown = NOOP,
 } ) => {
 	const ref = useRef( null )
@@ -72,11 +71,6 @@ export const DesignPreview = ( {
 		}
 	}, [ selectedTab ] )
 
-	useEffect( () => {
-		// The scale might not be correct on first load, so adjust it again to be sure.
-		setTimeout( adjustScale, 100 )
-	}, [] )
-
 	const shadowBodyClasses = classnames( applyFilters( 'stackable.global-styles.classnames', [
 		'entry-content',
 	] ), {

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

@@ -37,7 +37,7 @@ const DEFAULT_CONTENT = { ...DEFAULT }
 export const usePreviewRenderer = (
 	props, previewSize, plan, spacingSize,
 	selectedTab, selectedNum, selectedData,
-	ref, shadowRoot, setIsLoading
+	ref, hostRef, shadowRoot, setIsLoading
 ) => {
 	const {
 		designId,
@@ -61,23 +61,33 @@ export const usePreviewRenderer = (
 	const hasBackgroundTargetRef = useRef( false )
 	const initialRenderRef = useRef( null )
 	const shadowBodySizeRef = useRef( null )
-	const prevEnableBackgroundRef = useRef( false )
+	const prevEnableBackgroundRef = useRef( null )
 	const prevSelectedTabRef = useRef( selectedTab )
+	const adjustAnimateFrameRef = useRef( null )
 
 	const siteTitle = useSelect( select => select( 'core' ).getEntityRecord( 'root', 'site' )?.title || 'InnovateCo', [] )
 	const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
 
 	const addHasBackground = selectedTab === 'patterns'
 
-	const adjustScale = () => {
-		const shouldAdjust = ref.current && shadowRoot &&
+	const adjustScale = ( force = true ) => {
+		const shouldAdjust = ref.current && hostRef.current && shadowRoot &&
 			( ! selectedNum || // adjust if design is not selected
 				prevSelectedTabRef.current !== selectedTab ) // adjust if selected tab changed even if design is selected
 
 		if ( shouldAdjust ) {
 			const newPreviewSize = { ...previewSize }
 			const newCardHeight = { ...cardHeight }
+
 			const cardRect = ref.current.getBoundingClientRect()
+			const hostRect = hostRef.current.getBoundingClientRect()
+
+			const cardWidth = cardRect.width
+			const hostWidth = hostRect.width
+
+			if ( ! force && cardWidth === hostWidth ) {
+				return
+			}
 
 			const shadowBody = shadowRoot.querySelector( 'body' )
 			if ( shadowBody ) {
@@ -119,6 +129,9 @@ export const usePreviewRenderer = (
 
 			setTimeout( () => setCardHeight( newCardHeight ), 500 )
 		}
+
+		cancelAnimationFrame( adjustAnimateFrameRef.current )
+		adjustAnimateFrameRef.current = requestAnimationFrame( () => adjustScale( false ) )
 	}
 
 	const renderPreview = ( blockContent = content ) => {
@@ -274,7 +287,8 @@ export const usePreviewRenderer = (
 	useEffect( () => {
 		if ( selectedNum === 0 && content && shadowRoot ) {
 			renderPreview()
-			setTimeout( adjustScale, 100 )
+			cancelAnimationFrame( adjustAnimateFrameRef.current )
+			adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale )
 		}
 	}, [ selectedNum ] )
 
@@ -285,7 +299,8 @@ export const usePreviewRenderer = (
 
 		if ( prevEnableBackgroundRef.current !== enableBackground ) {
 			prevEnableBackgroundRef.current = enableBackground
-			adjustScale()
+			cancelAnimationFrame( adjustAnimateFrameRef.current )
+			adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale )
 		}
 	}, [ blocks ] )
 
@@ -294,12 +309,22 @@ export const usePreviewRenderer = (
 		if ( ! content || ! blocks.parsed || ! blocks.serialized ) {
 			return
 		}
-		setTimeout( () => {
+
+		cancelAnimationFrame( adjustAnimateFrameRef.current )
+		requestAnimationFrame( () => {
 			adjustScale()
 			prevSelectedTabRef.current = selectedTab
-		}, 100 )
+	 } )
 	}, [ content ] )
 
+	// cleanup any pending animation on unmount
+	useEffect( () => {
+		return () => {
+			cancelAnimationFrame( adjustAnimateFrameRef.current )
+			adjustAnimateFrameRef.current = null
+		}
+	}, [] )
+
 	const onClickDesign = () => {
 		if ( ! isPro && plan !== 'free' ) {
 			return
@@ -319,6 +344,6 @@ export const usePreviewRenderer = (
 	return {
 		blocks: blocks.serialized, enableBackground,
 		shadowBodySizeRef, blocksForSubstitutionRef,
-		adjustScale, onClickDesign,
+		onClickDesign,
 	}
 }

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

@@ -45,6 +45,9 @@
 
 		&.ugb-modal-design-library__full-pages {
 			grid-template-rows: auto auto;
+			.ugb-modal-design-library__designs {
+				grid-row: 1 / 4;
+			}
 		}
 	}
 	.ugb-modal-design-library__sidebar {