Skip to content

Commit 0de30d8

Browse files
kaeizenkaeizen
committed
improve scrolling
1 parent f78d06c commit 0de30d8

File tree

4 files changed

+56
-23
lines changed

4 files changed

+56
-23
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const DesignLibraryListItem = props => {
4747
blocks, enableBackground,
4848
shadowBodySizeRef, blocksForSubstitutionRef,
4949
previewSize, cardHeight, onClickDesign,
50+
updateShadowBodySize,
5051
} = usePreviewRenderer( props, shouldRender, spacingSize,
5152
ref, hostRef, shadowRoot, setIsLoading )
5253

@@ -65,7 +66,7 @@ const DesignLibraryListItem = props => {
6566

6667
const getCardHeight = () => {
6768
const key = props.enableBackground ? 'background' : 'noBackground'
68-
return cardHeight?.[ key ] || props.selectedTab === 'pages' ? 413 : 250
69+
return cardHeight?.[ key ] || ( props.selectedTab === 'pages' ? 413 : 250 )
6970
}
7071

7172
if ( ! shouldRender && ! props.selectedNum ) {
@@ -121,6 +122,7 @@ const DesignLibraryListItem = props => {
121122
shadowRoot={ shadowRoot }
122123
selectedTab={ selectedTab }
123124
onMouseDown={ onMouseDown }
125+
updateShadowBodySize={ updateShadowBodySize }
124126
/> }
125127
</div>
126128
</div>

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ export const DesignPreview = ( {
1414
shadowRoot,
1515
selectedTab,
1616
onMouseDown = NOOP,
17+
updateShadowBodySize = NOOP,
1718
} ) => {
1819
const ref = useRef( null )
20+
const wrapperRef = useRef( null )
1921

2022
const isDragging = useRef( false )
2123
const lastY = useRef( 0 )
@@ -77,13 +79,32 @@ export const DesignPreview = ( {
7779
'preview-pages': selectedTab === 'pages',
7880
} )
7981

82+
useEffect( () => {
83+
const wrapper = wrapperRef.current
84+
85+
if ( ! wrapper ) {
86+
return
87+
}
88+
89+
if ( selectedTab !== 'pages' ) {
90+
wrapper.innerHTML = safeHTML( blocks )
91+
}
92+
93+
requestAnimationFrame( () => {
94+
requestIdleCallback( () => {
95+
wrapper.innerHTML = safeHTML( blocks )
96+
updateShadowBodySize()
97+
} )
98+
} )
99+
}, [ blocks ] )
100+
80101
return createPortal( <>
81102
<body
82103
ref={ ref }
83104
className={ shadowBodyClasses }
84105
>
85106
<div
86-
dangerouslySetInnerHTML={ { __html: safeHTML( blocks ) } }
107+
ref={ wrapperRef }
87108
style={ { pointerEvents: 'none' } } // prevent blocks from being clicked
88109
/>
89110
</body>

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

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -95,24 +95,21 @@ const DesignLibraryItem = props => {
9595
const [ shouldRender, setShouldRender ] = useState( false )
9696

9797
useEffect( () => {
98-
const rootEl = document.querySelector( '.ugb-modal-design-library__designs' )
99-
if ( ! wrapperRef.current || ! rootEl ) {
100-
return
98+
let id
99+
if ( typeof requestIdleCallback !== 'undefined' ) {
100+
id = requestIdleCallback( () => setShouldRender( true ) )
101+
} else {
102+
// fallback
103+
id = setTimeout( () => setShouldRender( true ), 0 )
101104
}
102105

103-
const observer = new IntersectionObserver( ( [ entry ] ) => {
104-
// reduce flicker during rapid scrolls
105-
requestAnimationFrame( () => {
106-
requestAnimationFrame( () => setShouldRender( entry.isIntersecting ) )
107-
} )
108-
}, {
109-
root: rootEl,
110-
rootMargin: '500px 0px',
111-
threshold: 0,
112-
} )
113-
114-
observer.observe( wrapperRef.current )
115-
return () => observer.disconnect()
106+
return () => {
107+
if ( typeof cancelIdleCallback !== 'undefined' ) {
108+
cancelIdleCallback( id )
109+
} else {
110+
clearTimeout( id )
111+
}
112+
}
116113
}, [] )
117114

118115
return (

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,18 @@ export const usePreviewRenderer = (
7373

7474
const addHasBackground = selectedTab === 'patterns'
7575

76+
const updateShadowBodySize = _shadowBody => {
77+
const shadowBody = _shadowBody || shadowRoot?.querySelector( 'body' )
78+
79+
if ( shadowBody ) {
80+
shadowBodySizeRef.current = {
81+
clientHeight: shadowBody.clientHeight,
82+
scrollHeight: shadowBody.scrollHeight,
83+
maxScrollTop: shadowBody.scrollHeight - shadowBody.clientHeight,
84+
}
85+
}
86+
}
87+
7688
const adjustScale = ( force = true ) => {
7789
const parentDiv = ref?.current?.querySelector( '.stk-block-design__design-container' )
7890
const shouldAdjust = ref.current && hostRef.current && shadowRoot && parentDiv &&
@@ -127,11 +139,7 @@ export const usePreviewRenderer = (
127139
return newPreviewSize
128140
} )
129141

130-
shadowBodySizeRef.current = {
131-
clientHeight: shadowBody.clientHeight,
132-
scrollHeight: shadowBody.scrollHeight,
133-
maxScrollTop: shadowBody.scrollHeight - shadowBody.clientHeight,
134-
}
142+
updateShadowBodySize( shadowBody )
135143
}
136144

137145
// Update card height more efficiently
@@ -303,6 +311,10 @@ export const usePreviewRenderer = (
303311
} )
304312
}, [ template, shouldRender ] )
305313

314+
useEffect( () => {
315+
prevSelectedTabRef.current = selectedTab
316+
}, [ selectedTab ] )
317+
306318
useEffect( () => {
307319
if ( ! shouldRender ) {
308320
return
@@ -373,5 +385,6 @@ export const usePreviewRenderer = (
373385
blocks: blocks.serialized, enableBackground,
374386
shadowBodySizeRef, blocksForSubstitutionRef,
375387
previewSize, cardHeight, onClickDesign,
388+
updateShadowBodySize,
376389
}
377390
}

0 commit comments

Comments
 (0)