From b25ec3af95bacb5fd538fe9ca104f40a9eabc3ad Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 20:44:57 +0800 Subject: [PATCH 1/7] fix scale adjustment --- .../design-library-list-item.js | 11 +++-- .../design-library-list/design-preview.js | 6 --- src/components/design-library-list/index.js | 2 +- .../use-preview-renderer.js | 43 +++++++++++++++---- .../modal-design-library/editor.scss | 3 ++ 5 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js index 49caca70c9..b2886b1896 100644 --- a/src/components/design-library-list/design-library-list-item.js +++ b/src/components/design-library-list/design-library-list-item.js @@ -46,11 +46,11 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => { const { blocks, enableBackground, shadowBodySizeRef, blocksForSubstitutionRef, - adjustScale, onClickDesign, + onClickDesign, } = usePreviewRenderer( previewProps, previewSize, plan, spacingSize, selectedTab, selectedNum, selectedData, - ref, shadowRoot, setIsLoading + ref, hostRef, shadowRoot, isLoading, setIsLoading, ) const { @@ -58,6 +58,10 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => { } = useAutoScroll( hostRef, shadowBodySizeRef, selectedTab ) const getDesignPreviewSize = () => { + if ( ! shadowRoot || isLoading ) { + return 0 + } + return selectedNum && selectedData ? selectedData.selectedPreviewSize.preview : ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground ) } @@ -106,11 +110,10 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => { } } >
- { shadowRoot && }
diff --git a/src/components/design-library-list/design-preview.js b/src/components/design-library-list/design-preview.js index ae8ee49381..a4b3fa06f2 100644 --- a/src/components/design-library-list/design-preview.js +++ b/src/components/design-library-list/design-preview.js @@ -13,7 +13,6 @@ export const DesignPreview = ( { blocks = '', shadowRoot, selectedTab, - adjustScale = NOOP, onMouseDown = NOOP, } ) => { const ref = useRef( null ) @@ -72,11 +71,6 @@ export const DesignPreview = ( { } }, [ selectedTab ] ) - useEffect( () => { - // The scale might not be correct on first load, so adjust it again to be sure. - setTimeout( adjustScale, 100 ) - }, [] ) - const shadowBodyClasses = classnames( applyFilters( 'stackable.global-styles.classnames', [ 'entry-content', ] ), { diff --git a/src/components/design-library-list/index.js b/src/components/design-library-list/index.js index af15f91f55..071825bfc0 100644 --- a/src/components/design-library-list/index.js +++ b/src/components/design-library-list/index.js @@ -50,7 +50,7 @@ const DesignLibraryList = props => { { isBusy && } { ! isBusy && <>
- { ( designs || [] ).map( ( design, i ) => { + { ( designs?.[ 0 ] ? [ designs[ 0 ] ] : [] ).map( ( design, i ) => { const selectedNum = selectedDesigns.indexOf( design.id || design.designId ) + 1 const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null diff --git a/src/components/design-library-list/use-preview-renderer.js b/src/components/design-library-list/use-preview-renderer.js index a2579fad32..212c199e5f 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, isLoading, setIsLoading ) => { const { designId, @@ -61,23 +61,33 @@ 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 shouldAdjust = ref.current && hostRef.current && shadowRoot && ( ! 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() + const hostRect = hostRef.current.getBoundingClientRect() + + const cardWidth = cardRect.width + const hostWidth = hostRect.width + + if ( ! force && cardWidth === hostWidth ) { + return + } const shadowBody = shadowRoot.querySelector( 'body' ) if ( shadowBody ) { @@ -119,6 +129,9 @@ export const usePreviewRenderer = ( setTimeout( () => setCardHeight( newCardHeight ), 500 ) } + + cancelAnimationFrame( adjustAnimateFrameRef.current ) + adjustAnimateFrameRef.current = requestAnimationFrame( () => adjustScale( false ) ) } const renderPreview = ( blockContent = content ) => { @@ -274,7 +287,8 @@ export const usePreviewRenderer = ( useEffect( () => { if ( selectedNum === 0 && content && shadowRoot ) { renderPreview() - setTimeout( adjustScale, 100 ) + cancelAnimationFrame( adjustAnimateFrameRef.current ) + adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale ) } }, [ selectedNum ] ) @@ -285,7 +299,8 @@ export const usePreviewRenderer = ( if ( prevEnableBackgroundRef.current !== enableBackground ) { prevEnableBackgroundRef.current = enableBackground - adjustScale() + cancelAnimationFrame( adjustAnimateFrameRef.current ) + adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale ) } }, [ blocks ] ) @@ -294,12 +309,22 @@ export const usePreviewRenderer = ( if ( ! content || ! blocks.parsed || ! blocks.serialized ) { return } - setTimeout( () => { + + cancelAnimationFrame( 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 +344,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..b43e0f6d81 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 / 4; + } } } .ugb-modal-design-library__sidebar { From efeef6bb242385229c7a8859c0c4cf57ed32cc3e Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 20:48:43 +0800 Subject: [PATCH 2/7] minor fix --- src/components/design-library-list/design-library-list-item.js | 2 +- src/components/design-library-list/index.js | 2 +- src/components/design-library-list/use-preview-renderer.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js index b2886b1896..e77dcb3b61 100644 --- a/src/components/design-library-list/design-library-list-item.js +++ b/src/components/design-library-list/design-library-list-item.js @@ -50,7 +50,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => { } = usePreviewRenderer( previewProps, previewSize, plan, spacingSize, selectedTab, selectedNum, selectedData, - ref, hostRef, shadowRoot, isLoading, setIsLoading, + ref, hostRef, shadowRoot, setIsLoading, ) const { diff --git a/src/components/design-library-list/index.js b/src/components/design-library-list/index.js index 071825bfc0..af15f91f55 100644 --- a/src/components/design-library-list/index.js +++ b/src/components/design-library-list/index.js @@ -50,7 +50,7 @@ const DesignLibraryList = props => { { isBusy && } { ! isBusy && <>
- { ( designs?.[ 0 ] ? [ designs[ 0 ] ] : [] ).map( ( design, i ) => { + { ( designs || [] ).map( ( design, i ) => { const selectedNum = selectedDesigns.indexOf( design.id || design.designId ) + 1 const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null diff --git a/src/components/design-library-list/use-preview-renderer.js b/src/components/design-library-list/use-preview-renderer.js index 212c199e5f..c00533f75c 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, hostRef, shadowRoot, isLoading, setIsLoading + ref, hostRef, shadowRoot, setIsLoading ) => { const { designId, From 4dda0a5803837409ac98d3d475a8cbf3a373b8b0 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 22:09:29 +0800 Subject: [PATCH 3/7] fix designs not displaying correctly --- .../design-library-list-item.js | 2 +- .../design-library-list/editor.scss | 1 + src/components/design-library-list/index.js | 68 ++++++++----------- .../use-preview-renderer.js | 9 ++- 4 files changed, 39 insertions(+), 41 deletions(-) diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js index e77dcb3b61..8864a7ddcb 100644 --- a/src/components/design-library-list/design-library-list-item.js +++ b/src/components/design-library-list/design-library-list-item.js @@ -92,7 +92,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => { onMouseOver={ onMouseOver } > { ! isPro && plan !== 'free' && } -
100 ? 'stk--design-preview-large' : 'stk--design-preview-small' }` }> +
100 ? 'stk--design-preview-large' : 'stk--design-preview-small' }` }> { ! isPro && plan !== 'free' && ( { } = props const containerRef = useRef( null ) - const [ scrollTop, setScrollTop ] = useState( 0 ) - const listClasses = classnames( [ 'ugb-design-library-items', className, @@ -43,9 +41,6 @@ const DesignLibraryList = props => { return
{ - 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,40 @@ 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 + const rootEl = document.querySelector( '.ugb-modal-design-library__designs' ) + if ( ! wrapperRef.current || ! rootEl ) { + return + } - setShouldRender( render ) - }, 250 ) + const observer = new IntersectionObserver( ( [ entry ] ) => { + setShouldRender( entry.isIntersecting ) + }, { + root: rootEl, + rootMargin: '250px', + threshold: 0, + } ) - return () => { - clearTimeout( timeoutRef ) - } - }, [ scrollTop, _previewProps.enableBackground, _previewProps.designId ] ) + 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 c00533f75c..f621b26981 100644 --- a/src/components/design-library-list/use-preview-renderer.js +++ b/src/components/design-library-list/use-preview-renderer.js @@ -71,7 +71,8 @@ export const usePreviewRenderer = ( const addHasBackground = selectedTab === 'patterns' const adjustScale = ( force = true ) => { - const shouldAdjust = ref.current && hostRef.current && shadowRoot && + 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 @@ -81,11 +82,15 @@ export const usePreviewRenderer = ( const cardRect = ref.current.getBoundingClientRect() const hostRect = hostRef.current.getBoundingClientRect() + const parentDivRect = parentDiv.getBoundingClientRect() const cardWidth = cardRect.width const hostWidth = hostRect.width - if ( ! force && cardWidth === hostWidth ) { + // Consider heights equal if the difference is less than 1px + const isEqualHeight = Math.abs( parentDivRect.height - hostRect.height ) < 1 + + if ( ! force && cardWidth === hostWidth && isEqualHeight ) { return } From 767eb63885685bb1ab159456b9e2a01b29af476a Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 22:24:25 +0800 Subject: [PATCH 4/7] fix coderabbit's qa --- .../use-preview-renderer.js | 111 ++++++++++-------- .../modal-design-library/editor.scss | 2 +- 2 files changed, 64 insertions(+), 49 deletions(-) diff --git a/src/components/design-library-list/use-preview-renderer.js b/src/components/design-library-list/use-preview-renderer.js index f621b26981..5998df2891 100644 --- a/src/components/design-library-list/use-preview-renderer.js +++ b/src/components/design-library-list/use-preview-renderer.js @@ -76,66 +76,73 @@ export const usePreviewRenderer = ( ( ! 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 } + if ( ! shouldAdjust ) { + return + } + const newPreviewSize = { ...previewSize } + const newCardHeight = { ...cardHeight } - const cardRect = ref.current.getBoundingClientRect() - const hostRect = hostRef.current.getBoundingClientRect() - const parentDivRect = parentDiv.getBoundingClientRect() + const cardRect = ref.current.getBoundingClientRect() + const hostRect = hostRef.current.getBoundingClientRect() + const parentDivRect = parentDiv.getBoundingClientRect() - const cardWidth = cardRect.width - const hostWidth = hostRect.width + const cardWidth = cardRect.width + const hostWidth = hostRect.width - // Consider heights equal if the difference is less than 1px - const isEqualHeight = Math.abs( parentDivRect.height - hostRect.height ) < 1 + // Consider heights equal if the difference is less than 1px + const isEqualHeight = Math.abs( parentDivRect.height - hostRect.height ) < 1 - if ( ! force && cardWidth === hostWidth && isEqualHeight ) { - return + if ( ! force && cardWidth === hostWidth && isEqualHeight ) { + if ( adjustAnimateFrameRef.current !== null ) { + cancelAnimationFrame( adjustAnimateFrameRef.current ) } + adjustAnimateFrameRef.current = null + return + } - 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 - - let _bodyHeight = 1200 - if ( selectedTab === 'patterns' ) { - _bodyHeight = shadowBody.offsetHeight - } - - const _height = parseFloat( _bodyHeight ) * scaleFactor // Also adjust the height + 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 - if ( Object.keys( newPreviewSize ).length === 1 ) { - newPreviewSize.heightBackground = _height - newPreviewSize.heightNoBackground = _height - } else { - const heightKey = enableBackground ? 'heightBackground' : 'heightNoBackground' - newPreviewSize[ heightKey ] = _height - } + let _bodyHeight = 1200 + if ( selectedTab === 'patterns' ) { + _bodyHeight = shadowBody.offsetHeight + } - setPreviewSize( newPreviewSize ) + const _height = parseFloat( _bodyHeight ) * scaleFactor // Also adjust the height - shadowBodySizeRef.current = { - clientHeight: shadowBody.clientHeight, - scrollHeight: shadowBody.scrollHeight, - maxScrollTop: shadowBody.scrollHeight - shadowBody.clientHeight, - } + if ( Object.keys( newPreviewSize ).length === 1 ) { + newPreviewSize.heightBackground = _height + newPreviewSize.heightNoBackground = _height + } else { + const heightKey = enableBackground ? 'heightBackground' : 'heightNoBackground' + newPreviewSize[ heightKey ] = _height } - if ( ! Object.keys( newCardHeight ).length ) { - newCardHeight.background = cardRect.height - newCardHeight.noBackground = cardRect.height - } else { - const CardHeightKey = enableBackground ? 'background' : 'noBackground' - newCardHeight[ CardHeightKey ] = cardRect.height + setPreviewSize( newPreviewSize ) + + shadowBodySizeRef.current = { + clientHeight: shadowBody.clientHeight, + scrollHeight: shadowBody.scrollHeight, + maxScrollTop: shadowBody.scrollHeight - shadowBody.clientHeight, } + } - setTimeout( () => setCardHeight( newCardHeight ), 500 ) + if ( ! Object.keys( newCardHeight ).length ) { + newCardHeight.background = cardRect.height + newCardHeight.noBackground = cardRect.height + } else { + const CardHeightKey = enableBackground ? 'background' : 'noBackground' + newCardHeight[ CardHeightKey ] = cardRect.height } - cancelAnimationFrame( adjustAnimateFrameRef.current ) + setTimeout( () => setCardHeight( newCardHeight ), 500 ) + + if ( adjustAnimateFrameRef.current !== null ) { + cancelAnimationFrame( adjustAnimateFrameRef.current ) + } adjustAnimateFrameRef.current = requestAnimationFrame( () => adjustScale( false ) ) } @@ -292,7 +299,9 @@ export const usePreviewRenderer = ( useEffect( () => { if ( selectedNum === 0 && content && shadowRoot ) { renderPreview() - cancelAnimationFrame( adjustAnimateFrameRef.current ) + if ( adjustAnimateFrameRef.current !== null ) { + cancelAnimationFrame( adjustAnimateFrameRef.current ) + } adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale ) } }, [ selectedNum ] ) @@ -304,7 +313,10 @@ export const usePreviewRenderer = ( if ( prevEnableBackgroundRef.current !== enableBackground ) { prevEnableBackgroundRef.current = enableBackground - cancelAnimationFrame( adjustAnimateFrameRef.current ) + + if ( adjustAnimateFrameRef.current !== null ) { + cancelAnimationFrame( adjustAnimateFrameRef.current ) + } adjustAnimateFrameRef.current = requestAnimationFrame( adjustScale ) } }, [ blocks ] ) @@ -315,7 +327,10 @@ export const usePreviewRenderer = ( return } - cancelAnimationFrame( adjustAnimateFrameRef.current ) + if ( adjustAnimateFrameRef.current !== null ) { + cancelAnimationFrame( adjustAnimateFrameRef.current ) + } + requestAnimationFrame( () => { adjustScale() prevSelectedTabRef.current = selectedTab diff --git a/src/components/modal-design-library/editor.scss b/src/components/modal-design-library/editor.scss index b43e0f6d81..4520bf5c03 100644 --- a/src/components/modal-design-library/editor.scss +++ b/src/components/modal-design-library/editor.scss @@ -46,7 +46,7 @@ &.ugb-modal-design-library__full-pages { grid-template-rows: auto auto; .ugb-modal-design-library__designs { - grid-row: 1 / 4; + grid-row: 1 / -1; } } } From 6b5f3df74a41e6090dc2d09691a6efbc9fd013ba Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 22:48:11 +0800 Subject: [PATCH 5/7] use double rAF --- src/components/design-library-list/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/design-library-list/index.js b/src/components/design-library-list/index.js index f54db34af1..43a04d82de 100644 --- a/src/components/design-library-list/index.js +++ b/src/components/design-library-list/index.js @@ -115,7 +115,10 @@ const DesignLibraryItem = props => { } const observer = new IntersectionObserver( ( [ entry ] ) => { - setShouldRender( entry.isIntersecting ) + // reduce flicker during rapid scrolls + requestAnimationFrame( () => { + requestAnimationFrame( () => setShouldRender( entry.isIntersecting ) ) + } ) }, { root: rootEl, rootMargin: '250px', From ef9b9a0272ebe36a82292c39fb14d70cd697cda1 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 22:49:21 +0800 Subject: [PATCH 6/7] store rAF --- src/components/design-library-list/use-preview-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/design-library-list/use-preview-renderer.js b/src/components/design-library-list/use-preview-renderer.js index 5998df2891..5dfca6f16d 100644 --- a/src/components/design-library-list/use-preview-renderer.js +++ b/src/components/design-library-list/use-preview-renderer.js @@ -331,7 +331,7 @@ export const usePreviewRenderer = ( cancelAnimationFrame( adjustAnimateFrameRef.current ) } - requestAnimationFrame( () => { + adjustAnimateFrameRef.current = requestAnimationFrame( () => { adjustScale() prevSelectedTabRef.current = selectedTab } ) From e355456739bffad8cc1e084eb9d9f08e5b548787 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 18 Sep 2025 23:00:19 +0800 Subject: [PATCH 7/7] increase root margin --- src/components/design-library-list/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/design-library-list/index.js b/src/components/design-library-list/index.js index 43a04d82de..d04dff80c5 100644 --- a/src/components/design-library-list/index.js +++ b/src/components/design-library-list/index.js @@ -121,7 +121,7 @@ const DesignLibraryItem = props => { } ) }, { root: rootEl, - rootMargin: '250px', + rootMargin: '500px', threshold: 0, } )