display first 9 pages

Author: kaeizen

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

@@ -121,6 +121,7 @@ const DesignLibraryListItem = props => {
 							blocks={ blocks }
 							shadowRoot={ shadowRoot }
 							selectedTab={ selectedTab }
+							designIndex={ props.designIndex }
 							onMouseDown={ onMouseDown }
 							updateShadowBodySize={ updateShadowBodySize }
 						/> }

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

@@ -13,6 +13,7 @@ export const DesignPreview = ( {
 	blocks = '',
 	shadowRoot,
 	selectedTab,
+	designIndex,
 	onMouseDown = NOOP,
 	updateShadowBodySize = NOOP,
 } ) => {
@@ -89,7 +90,8 @@ export const DesignPreview = ( {
 		const ric = window.requestIdleCallback || window.requestAnimationFrame
 		const sanitizedHTML = safeHTML( blocks )
 
-		if ( selectedTab !== 'pages' ) {
+		if ( selectedTab !== 'pages' || designIndex < 9 ) {
+			// insert HTML for patterns and for the first 9 pages
 			wrapper.innerHTML = sanitizedHTML
 			return
 		}

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

@@ -46,7 +46,7 @@ const DesignLibraryList = props => {
 		{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
 		{ ! isBusy && <>
 			<div className={ listClasses }>
-				{ ( designs || [] ).map( design => {
+				{ ( designs || [] ).map( ( design, i ) => {
 					const selectedNum = selectedDesigns.indexOf( design.id || design.designId ) + 1
 					const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
 
@@ -68,6 +68,7 @@ const DesignLibraryList = props => {
 							selectedNum={ selectedNum }
 							selectedData={ selectedData }
 							selectedTab={ selectedTab }
+							designIndex={ i }
 							{ ...previewProps }
 						/>
 					)