fix: lazy load design library

src/components/index.js

@@ -20,7 +20,6 @@ export { default as SortControl } from './sort-control'
 export { default as PanelAdvancedSettings } from './panel-advanced-settings'
 export { default as PanelDesignLibrary } from './panel-design-library'
 export { default as InspectorPanelControls } from './panel-tabs/inspector-panel-controls'
-export { default as DesignLibraryList } from './design-library-list'
 export { default as PanelTabs } from './panel-tabs'
 export { default as Button } from './button'
 export { default as DesignPanelBody } from './design-panel-body'

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

@@ -1,13 +1,10 @@
-/**
- * Internal dependencies
- */
-import { ModalDesignLibrary } from './modal'
-
 /**
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks'
-import { useMemo, useCallback } from '@wordpress/element'
+import {
+	useMemo, useCallback, Suspense, lazy,
+} from '@wordpress/element'
 import { useLocalStorage } from '~stackable/util'
 
 export const Switcher = props => {
@@ -21,19 +18,25 @@ export const Switcher = props => {
 	// disabled, always default to the first version
 	const apiVersion = versions.includes( _apiVersion ) ? _apiVersion : versions[ 0 ]
 
+	// Lazy-load the ModalDesignLibrary to reduce initial bundle size
+	// Note: We import the named export and set it as default for React.lazy
+	const LazyModalDesignLibrary = lazy( () => import( /* webpackChunkName: "design-library" */ '~stackable/lazy-components/design-library' ) )
+
 	const ModalComponent = useMemo( () => {
-		return applyFilters( 'stackable.design-library.modal-component', ModalDesignLibrary, apiVersion )
+		return applyFilters( 'stackable.design-library.modal-component', LazyModalDesignLibrary, apiVersion )
 	}, [ apiVersion ] )
 
 	const onChangeApiVersion = useCallback( v => setApiVersion( v ), [] )
 
 	return (
-		<ModalComponent
-			hasVersionSwitcher={ versions.length > 1 }
-			apiVersion={ apiVersion }
-			onChangeApiVersion={ onChangeApiVersion }
-			{ ...props }
-		/>
+		<Suspense fallback={ null }>
+			<ModalComponent
+				hasVersionSwitcher={ versions.length > 1 }
+				apiVersion={ apiVersion }
+				onChangeApiVersion={ onChangeApiVersion }
+				{ ...props }
+			/>
+		</Suspense>
 	)
 }
 

src/design-library/index.js

@@ -29,13 +29,13 @@ export const fetchDesignLibrary = async ( forceReset = false, version = '', type
 		designLibrary[ type ] = designsPerType
 
 		if ( type === 'patterns' ) {
-			designs = designsPerType[ LATEST_API_VERSION ]
+			designs = designsPerType[ LATEST_API_VERSION ] ?? {}
 		} else {
-			pages = designsPerType[ LATEST_API_VERSION ]
+			pages = designsPerType[ LATEST_API_VERSION ] ?? {}
 		}
 	}
 
-	return designLibrary[ type ][ version || LATEST_API_VERSION ]
+	return designLibrary[ type ]?.[ version || LATEST_API_VERSION ] ?? designLibrary[ type ]
 }
 
 export const fetchDesign = async designId => {
@@ -63,6 +63,13 @@ export const getDesigns = async ( {
 } ) => {
 	const designLibrary = await fetchDesignLibrary( reset, LATEST_API_VERSION, type )
 
+	if ( designLibrary.wp_remote_get_error || designLibrary.content_error ) {
+		const error = designLibrary.wp_remote_get_error ?? designLibrary.content_error
+		// eslint-disable-next-line no-console
+		console.error( 'Stackable: ', error )
+		return { error }
+	}
+
 	// pre-fetch patterns
 	if ( type === 'pages' ) {
 		await fetchDesignLibrary()

src/lazy-components/design-library/context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from '@wordpress/element'
+
+export const DesignLibraryContext = createContext( null )
+
+export const useDesignLibraryContext = () => {
+	return useContext( DesignLibraryContext )
+}

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

@@ -1,8 +1,6 @@
 /**
  * Internal dependencies.
  */
-import ProControl from '../pro-control'
-import Button from '../button'
 import { DesignPreview } from './design-preview'
 import { useShadowRoot } from './use-shadow-root'
 import { usePreviewRenderer } from './use-preview-renderer'
@@ -13,7 +11,9 @@ import { useAutoScroll } from './use-auto-scroll'
  */
 import { isPro, i18n } from 'stackable'
 import classnames from 'classnames'
-import { Tooltip } from '~stackable/components'
+import {
+	Tooltip, Button, ProControl,
+} from '~stackable/components'
 
 /**
  * WordPress dependencies.

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

@@ -2,11 +2,13 @@
  * Internal dependencies
  */
 import DesignLibraryListItem from './design-library-list-item'
+import { useDesignLibraryContext } from '../context'
 
 /**
  * External dependencies
  */
 import { i18n } from 'stackable'
+import { usePresetControls } from '~stackable/hooks'
 import classnames from 'classnames'
 
 /**
@@ -17,14 +19,13 @@ import { __ } from '@wordpress/i18n'
 import {
 	useState, useEffect, useRef, memo, useMemo,
 } from '@wordpress/element'
-import { usePresetControls } from '~stackable/hooks'
-import { useDesignLibraryContext } from '../modal-design-library/modal'
 
 const DesignLibraryList = memo( props => {
 	const {
 		className = '',
 		designs,
 		isBusy,
+		errors,
 	} = props
 	const containerRef = useRef( null )
 
@@ -57,6 +58,12 @@ const DesignLibraryList = memo( props => {
 				{ ! ( designs || [] ).length &&
 					<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
 				}
+				{ typeof errors === 'object' && Object.keys( errors ).length &&
+					<p className="components-base-control__help">
+						<strong>{ __( 'An error has occurred:', i18n ) }</strong>
+						<br />
+						{ Object.values( errors ).join( '; ' ) }
+					</p> }
 			</div>
 		</> }
 	</div>

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

@@ -3,15 +3,15 @@
  * Internal dependencies.
  */
 import DEFAULT from './default.json'
-import mapsGraphic from './images/maps.webp'
+import mapsGraphic from '../images/maps.webp'
 import {
 	addBackgroundScheme, addContainerScheme,
 	addPlaceholderForPostsBlock, cleanParse,
 	parseDisabledBlocks, adjustPatternSpacing,
 	replacePlaceholders,
 	replaceImages,
 	getCategorySlug,
-} from './util'
+} from '../util'
 
 /**
  * External dependencies.

src/components/design-library-list/use-shadow-root.js → src/lazy-components/design-library/design-library-list/use-shadow-root.js

@@ -1,5 +1,5 @@
 import { wpGlobalStylesInlineCss } from 'stackable'
-import { getAdditionalStylesForPreview } from './util'
+import { getAdditionalStylesForPreview } from '../util'
 
 import {
 	useEffect, useRef, useState,

src/components/modal-design-library/header-actions.js → src/lazy-components/design-library/header-actions.js

@@ -1,12 +1,10 @@
-
-import AdvancedToolbarControl from '../advanced-toolbar-control'
-import Button from '../button'
 /**
  * External deprendencies
  */
 import {
 	i18n, isPro, devMode,
 } from 'stackable'
+import { AdvancedToolbarControl, Button } from '~stackable/components'
 
 /**
  * WordPress deprendencies

src/components/modal-design-library/modal.js → src/lazy-components/design-library/index.js

@@ -3,17 +3,21 @@
  */
 import HelpSVG from './images/help.svg'
 import BlockList from './block-list'
-import Button from '../button'
-import DesignLibraryList from '~stackable/components/design-library-list'
-import { GuidedModalTour } from '~stackable/components'
-import { getDesigns, filterDesigns } from '~stackable/design-library'
+import { HeaderActions, PLAN_OPTIONS } from './header-actions'
+import DesignLibraryList from './design-library-list'
+import { DesignLibraryContext } from './context'
 
 /**
  * External deprendencies
  */
 import { i18n } from 'stackable'
 import classnames from 'classnames'
 import { useLocalStorage } from '~stackable/util'
+import { useBlockColorSchemes } from '~stackable/hooks'
+import {
+	GuidedModalTour, Button, ColorSchemePreview, ColorSchemesHelp, Tooltip,
+} from '~stackable/components'
+import { getDesigns, filterDesigns } from '~stackable/design-library'
 
 /**
  * WordPress deprendencies
@@ -26,15 +30,10 @@ import {
 	ToggleControl,
 } from '@wordpress/components'
 import {
-	useEffect, useState, createContext, useContext, useCallback,
+	useEffect, useState, useCallback,
 	useMemo,
 } from '@wordpress/element'
 import { sprintf, __ } from '@wordpress/i18n'
-import { useBlockColorSchemes } from '~stackable/hooks'
-import ColorSchemePreview from '../color-scheme-preview'
-import { ColorSchemesHelp } from '../color-schemes-help'
-import Tooltip from '../tooltip'
-import { HeaderActions, PLAN_OPTIONS } from './header-actions'
 
 const popoverProps = {
 	className: 'ugb-design-library__color-scheme-popover',
@@ -46,13 +45,7 @@ const popoverProps = {
 // This is to make sure that the design library shows "all" at the start.
 localStorage?.setItem( 'stk__design_library__block-list__selected', '' )
 
-export const DesignLibraryContext = createContext( null )
-
-export const useDesignLibraryContext = () => {
-	return useContext( DesignLibraryContext )
-}
-
-export const ModalDesignLibrary = props => {
+const ModalDesignLibrary = props => {
 	const {
 		backgroundModeColorScheme, containerModeColorScheme, colorSchemesCollection,
 	} = useBlockColorSchemes()
@@ -73,6 +66,8 @@ export const ModalDesignLibrary = props => {
 	// The display designs are used to list the available designs the user can choose.
 	const [ displayDesigns, setDisplayDesigns ] = useState( [] )
 
+	const [ errors, setErrors ] = useState( [] )
+
 	const [ enableBackground, setEnableBackground ] = useState( false )
 	const [ selectedContainerScheme, setSelectedContainerScheme ] = useState( '' )
 	const [ selectedBackgroundScheme, setSelectedBackgroundScheme ] = useState( '' )
@@ -92,12 +87,20 @@ export const ModalDesignLibrary = props => {
 	useEffect( () => {
 		setIsBusy( true )
 		setSidebarDesigns( [] )
+		setErrors( [] )
 
 		getDesigns( {
 			reset: doReset,
 			type: selectedTab,
 		} ).then( designs => {
-			setSidebarDesigns( designs )
+			let _designs = designs
+
+			if ( typeof designs === 'object' && designs.error ) {
+				_designs = []
+				setErrors( designs.error )
+			}
+
+			setSidebarDesigns( _designs )
 			setSelectedCategory( '' )
 		} ).finally( () => {
 			setDoReset( false )
@@ -390,6 +393,7 @@ export const ModalDesignLibrary = props => {
 						className={ `stk-design-library__item-${ selectedTab }` }
 						isBusy={ isBusy }
 						designs={ displayDesigns }
+						errors={ errors }
 					/>
 
 					{ selectedTab === 'patterns' && <aside className="ugb-modal-design-library__footer">
@@ -420,6 +424,8 @@ ModalDesignLibrary.defaultProps = {
 	onChangeApiVersion: () => {},
 }
 
+export default ModalDesignLibrary
+
 const ColorSchemeTextItem = props => {
 	return <div style={ { position: 'relative' } }>
 		<div style={ { opacity: '0' } }><ColorSchemePreview isCollapsed={ true } /></div>

src/components/design-library-list/util.js → src/lazy-components/design-library/util.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import DEFAULT from './default.json'
+import DEFAULT from './design-library-list/default.json'
 
 import {
 	settings, isPro, cdnUrl,

src/lazy-components/style-guide/utils.js

@@ -20,7 +20,7 @@ import {
 	createBlocksFromInnerBlocksTemplate,
 	getBlockVariations,
 } from '@wordpress/blocks'
-import { DEFAULT_CONTENT, addPlaceholderForPostsBlock } from '../../components/design-library-list/util'
+import { DEFAULT_CONTENT, addPlaceholderForPostsBlock } from '../design-library/util'
 
 export const DUMMY_COLOR_SCHEMES = [
 	{