{
- setScrollTop( e.currentTarget.scrollTop )
- } }
>
{ isBusy &&
}
{ ! isBusy && <>
@@ -73,7 +68,6 @@ const DesignLibraryList = props => {
selectedNum={ selectedNum }
selectedData={ selectedData }
selectedTab={ props.selectedTab }
- scrollTop={ scrollTop }
designKey={ i }
/>
)
@@ -98,9 +92,10 @@ export default DesignLibraryList
const DesignLibraryItem = props => {
const {
- scrollTop, previewProps: _previewProps, ...propsToPass
+ previewProps: _previewProps, ...propsToPass
} = props
+ const wrapperRef = useRef( null )
const itemRef = useRef( null )
const [ cardHeight, setCardHeight ] = useState( {} )
const [ previewSize, setPreviewSize ] = useState( {} )
@@ -114,43 +109,43 @@ const DesignLibraryItem = props => {
}
useEffect( () => {
- // Use a timeout to ensure designs have finished rendering before calculating visibility.
- const timeoutRef = setTimeout( () => {
- const itemEl = itemRef.current
- const containerEl = itemEl?.closest( '.ugb-modal-design-library__designs' ) || document.querySelector( '.ugb-modal-design-library__designs' )
-
- if ( ! itemEl || ! containerEl ) {
- return
- }
-
- const containerRect = containerEl.getBoundingClientRect()
- const itemRect = itemEl.getBoundingClientRect()
-
- const BOUNDARY = 250
-
- const render = itemRect.bottom >= containerRect.top - BOUNDARY && itemRect.top <= containerRect.bottom + BOUNDARY
-
- setShouldRender( render )
- }, 250 )
-
- return () => {
- clearTimeout( timeoutRef )
+ const rootEl = document.querySelector( '.ugb-modal-design-library__designs' )
+ if ( ! wrapperRef.current || ! rootEl ) {
+ return
}
- }, [ scrollTop, _previewProps.enableBackground, _previewProps.designId ] )
+
+ const observer = new IntersectionObserver( ( [ entry ] ) => {
+ // reduce flicker during rapid scrolls
+ requestAnimationFrame( () => {
+ requestAnimationFrame( () => setShouldRender( entry.isIntersecting ) )
+ } )
+ }, {
+ root: rootEl,
+ rootMargin: '500px',
+ 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
}
- if ( ! shouldRender && ! props.selectedNum ) {
- return
- }
-
- return
+ return (
+
+ { ! shouldRender && ! props.selectedNum ? (
+
+ ) : (
+
+ ) }
+
+ )
}
diff --git a/src/components/design-library-list/use-preview-renderer.js b/src/components/design-library-list/use-preview-renderer.js
index a2579fad32..5dfca6f16d 100644
--- a/src/components/design-library-list/use-preview-renderer.js
+++ b/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,64 +61,89 @@ 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 parentDiv = ref?.current?.querySelector( '.stk-block-design__design-container' )
+ const shouldAdjust = ref.current && hostRef.current && shadowRoot && parentDiv &&
( ! 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()
+ if ( ! shouldAdjust ) {
+ return
+ }
+ const newPreviewSize = { ...previewSize }
+ const newCardHeight = { ...cardHeight }
- const shadowBody = shadowRoot.querySelector( 'body' )
- if ( shadowBody ) {
- const cardWidth = cardRect.width // Get width of the card
- const scaleFactor = cardWidth > 0 ? cardWidth / 1300 : 1 // Divide by 1300, which is the width of preview in the shadow DOM
- newPreviewSize.scale = scaleFactor
+ const cardRect = ref.current.getBoundingClientRect()
+ const hostRect = hostRef.current.getBoundingClientRect()
+ const parentDivRect = parentDiv.getBoundingClientRect()
- let _bodyHeight = 1200
- if ( selectedTab === 'patterns' ) {
- _bodyHeight = shadowBody.offsetHeight
- }
+ const cardWidth = cardRect.width
+ const hostWidth = hostRect.width
- const _height = parseFloat( _bodyHeight ) * scaleFactor // Also adjust the height
+ // Consider heights equal if the difference is less than 1px
+ const isEqualHeight = Math.abs( parentDivRect.height - hostRect.height ) < 1
- if ( Object.keys( newPreviewSize ).length === 1 ) {
- newPreviewSize.heightBackground = _height
- newPreviewSize.heightNoBackground = _height
- } else {
- const heightKey = enableBackground ? 'heightBackground' : 'heightNoBackground'
- newPreviewSize[ heightKey ] = _height
- }
+ if ( ! force && cardWidth === hostWidth && isEqualHeight ) {
+ if ( adjustAnimateFrameRef.current !== null ) {
+ cancelAnimationFrame( adjustAnimateFrameRef.current )
+ }
+ adjustAnimateFrameRef.current = null
+ return
+ }
- setPreviewSize( newPreviewSize )
+ const shadowBody = shadowRoot.querySelector( 'body' )
+ if ( shadowBody ) {
+ const cardWidth = cardRect.width // Get width of the card
+ const scaleFactor = cardWidth > 0 ? cardWidth / 1300 : 1 // Divide by 1300, which is the width of preview in the shadow DOM
+ newPreviewSize.scale = scaleFactor
- shadowBodySizeRef.current = {
- clientHeight: shadowBody.clientHeight,
- scrollHeight: shadowBody.scrollHeight,
- maxScrollTop: shadowBody.scrollHeight - shadowBody.clientHeight,
- }
+ let _bodyHeight = 1200
+ if ( selectedTab === 'patterns' ) {
+ _bodyHeight = shadowBody.offsetHeight
}
- if ( ! Object.keys( newCardHeight ).length ) {
- newCardHeight.background = cardRect.height
- newCardHeight.noBackground = cardRect.height
+ const _height = parseFloat( _bodyHeight ) * scaleFactor // Also adjust the height
+
+ if ( Object.keys( newPreviewSize ).length === 1 ) {
+ newPreviewSize.heightBackground = _height
+ newPreviewSize.heightNoBackground = _height
} else {
- const CardHeightKey = enableBackground ? 'background' : 'noBackground'
- newCardHeight[ CardHeightKey ] = cardRect.height
+ const heightKey = enableBackground ? 'heightBackground' : 'heightNoBackground'
+ newPreviewSize[ heightKey ] = _height
+ }
+
+ setPreviewSize( newPreviewSize )
+
+ shadowBodySizeRef.current = {
+ clientHeight: shadowBody.clientHeight,
+ scrollHeight: shadowBody.scrollHeight,
+ maxScrollTop: shadowBody.scrollHeight - shadowBody.clientHeight,
}
+ }
+
+ if ( ! Object.keys( newCardHeight ).length ) {
+ newCardHeight.background = cardRect.height
+ newCardHeight.noBackground = cardRect.height
+ } else {
+ const CardHeightKey = enableBackground ? 'background' : 'noBackground'
+ newCardHeight[ CardHeightKey ] = cardRect.height
+ }
+
+ setTimeout( () => setCardHeight( newCardHeight ), 500 )
- setTimeout( () => setCardHeight( newCardHeight ), 500 )
+ if ( adjustAnimateFrameRef.current !== null ) {
+ cancelAnimationFrame( adjustAnimateFrameRef.current )
}
+ adjustAnimateFrameRef.current = requestAnimationFrame( () => adjustScale( false ) )
}
const renderPreview = ( blockContent = content ) => {
@@ -274,7 +299,10 @@ export const usePreviewRenderer = (
useEffect( () => {
if ( selectedNum === 0 && content && shadowRoot ) {
renderPreview()
- setTimeout( adjustScale, 100 )
+ if ( adjustAnimateFrameRef.current !== null ) {
+ cancelAnimationFrame( adjustAnimateFrameRef.current )
+ }
+ adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale )
}
}, [ selectedNum ] )
@@ -285,7 +313,11 @@ export const usePreviewRenderer = (
if ( prevEnableBackgroundRef.current !== enableBackground ) {
prevEnableBackgroundRef.current = enableBackground
- adjustScale()
+
+ if ( adjustAnimateFrameRef.current !== null ) {
+ cancelAnimationFrame( adjustAnimateFrameRef.current )
+ }
+ adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale )
}
}, [ blocks ] )
@@ -294,12 +326,25 @@ export const usePreviewRenderer = (
if ( ! content || ! blocks.parsed || ! blocks.serialized ) {
return
}
- setTimeout( () => {
+
+ if ( adjustAnimateFrameRef.current !== null ) {
+ cancelAnimationFrame( adjustAnimateFrameRef.current )
+ }
+
+ 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 +364,6 @@ export const usePreviewRenderer = (
return {
blocks: blocks.serialized, enableBackground,
shadowBodySizeRef, blocksForSubstitutionRef,
- adjustScale, onClickDesign,
+ onClickDesign,
}
}
diff --git a/src/components/modal-design-library/editor.scss b/src/components/modal-design-library/editor.scss
index 2aa1a4f83d..4520bf5c03 100644
--- a/src/components/modal-design-library/editor.scss
+++ b/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 / -1;
+ }
}
}
.ugb-modal-design-library__sidebar {