fix (design library): improve scrolling

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

@@ -19,20 +19,18 @@ import { Tooltip } from '~stackable/components'
 /**
  * WordPress dependencies.
  */
-import { forwardRef, useState } from '@wordpress/element'
+import { useState, useRef } from '@wordpress/element'
 import { Dashicon, Spinner } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 
-const DesignLibraryListItem = forwardRef( ( props, ref ) => {
+const DesignLibraryListItem = props => {
 	const {
-		label,
-		plan,
-		selectedNum = false,
-		selectedData = null,
-		previewSize,
-		previewProps,
 		selectedTab,
+		plan, label,
+		selectedNum,
+		selectedData,
 		isMultiSelectBusy,
+		shouldRender,
 	} = props
 
 	const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
@@ -41,17 +39,16 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 
 	const [ isLoading, setIsLoading ] = useState( true )
 
-	const { hostRef, shadowRoot } = useShadowRoot()
+	const { hostRef, shadowRoot } = useShadowRoot( shouldRender )
+
+	const ref = useRef( null )
 
 	const {
 		blocks, enableBackground,
 		shadowBodySizeRef, blocksForSubstitutionRef,
-		onClickDesign,
-	} = usePreviewRenderer(
-		previewProps, previewSize, plan, spacingSize,
-		selectedTab, selectedNum, selectedData,
-		ref, hostRef, shadowRoot, setIsLoading,
-	)
+		previewSize, cardHeight, onClickDesign,
+	} = usePreviewRenderer( props, shouldRender, spacingSize,
+		ref, hostRef, shadowRoot, setIsLoading )
 
 	const {
 		onMouseOut, onMouseOver, onMouseDown,
@@ -66,6 +63,15 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 			: ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground )
 	}
 
+	const getCardHeight = () => {
+		const key = props.enableBackground ? 'background' : 'noBackground'
+		return cardHeight?.[ key ] || props.selectedTab === 'pages' ? 413 : 250
+	}
+
+	if ( ! shouldRender && ! props.selectedNum ) {
+		return <div style={ { height: `${ getCardHeight() }px` } } />
+	}
+
 	const mainClasses = classnames( [
 		'ugb-design-library-item',
 		'ugb-design-library-item--toggle',
@@ -155,7 +161,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 			</footer>
 		</button>
 	)
-} )
+}
 
 DesignLibraryListItem.defaultProps = {
 	designId: '',

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

@@ -233,7 +233,7 @@
 	}
 
 	&.stk-design-library__item-pages .stk-spinner-container {
-		height: 400px;
+		height: 343px;
 		display: flex;
 		.components-spinner {
 			margin: auto;

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

@@ -26,6 +26,7 @@ const DesignLibraryList = props => {
 		onSelectMulti,
 		selectedDesigns = [],
 		selectedDesignData = [],
+		selectedTab,
 	} = props
 	const containerRef = useRef( null )
 
@@ -45,7 +46,7 @@ const DesignLibraryList = props => {
 		{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
 		{ ! isBusy && <>
 			<div className={ listClasses }>
-				{ ( designs || [] ).map( ( design, i ) => {
+				{ ( designs || [] ).map( design => {
 					const selectedNum = selectedDesigns.indexOf( design.id || design.designId ) + 1
 					const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
 
@@ -61,14 +62,13 @@ const DesignLibraryList = props => {
 
 					return (
 						<DesignLibraryItem
-							key={ i }
+							key={ design.id || design.designId }
 							plan={ design.plan }
 							label={ design.label || design.title }
-							previewProps={ previewProps }
 							selectedNum={ selectedNum }
 							selectedData={ selectedData }
-							selectedTab={ props.selectedTab }
-							designKey={ i }
+							selectedTab={ selectedTab }
+							{ ...previewProps }
 						/>
 					)
 				} ) }
@@ -91,22 +91,8 @@ DesignLibraryList.defaultProps = {
 export default DesignLibraryList
 
 const DesignLibraryItem = props => {
-	const {
-		previewProps: _previewProps, ...propsToPass
-	} = props
-
 	const wrapperRef = useRef( null )
-	const itemRef = useRef( null )
-	const [ cardHeight, setCardHeight ] = useState( {} )
-	const [ previewSize, setPreviewSize ] = useState( {} )
-	const [ shouldRender, setShouldRender ] = useState( props.designKey < 9 )
-
-	const previewProps = {
-		..._previewProps,
-		setPreviewSize: previewSize => setPreviewSize( previewSize ),
-		setCardHeight: height => setCardHeight( height ),
-		cardHeight,
-	}
+	const [ shouldRender, setShouldRender ] = useState( false )
 
 	useEffect( () => {
 		const rootEl = document.querySelector( '.ugb-modal-design-library__designs' )
@@ -121,31 +107,17 @@ const DesignLibraryItem = props => {
 			} )
 		}, {
 			root: rootEl,
-			rootMargin: '500px',
+			rootMargin: '500px 0px',
 			threshold: 0,
 		} )
 
 		observer.observe( wrapperRef.current )
 		return () => observer.disconnect()
 	}, [] )
 
-	const getCardHeight = () => {
-		const key = _previewProps.enableBackground ? 'background' : 'noBackground'
-		return props.selectedTab === 'pages' ? 472 : cardHeight?.[ key ] || 250
-	}
-
 	return (
 		<div ref={ wrapperRef }>
-			{ ! shouldRender && ! props.selectedNum ? (
-				<div ref={ itemRef } style={ { height: `${ getCardHeight() }px` } } />
-			) : (
-				<DesignLibraryListItem
-					ref={ itemRef }
-					previewSize={ previewSize }
-					previewProps={ previewProps }
-					{ ...propsToPass }
-				/>
-			) }
+			<DesignLibraryListItem { ...props } shouldRender={ shouldRender } />
 		</div>
 	)
 }