feat: lazy load design library (#3632)

* lazy load design library

* display errors

* code rabbit's qa fixes

* fix: handle if there are no errors

---------

Co-authored-by: [email protected] <>

Author: kaeizen

src/components/design-library-list/favorite-button.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/design-library-list/images/heart-fill.svg

@@ -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/components/design-library-list/images/heart.svg

@@ -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/components/index.js

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

src/components/modal-design-library/index.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.