Skip to content

Commit 1f652ed

Browse files
kaeizenkaeizen
authored
fix (design library): improve scrolling (#3601)
* improve scrolling * improve scrolling * fix to code rabbit's qa * display first 9 pages * show spinner * hide spinner * fix to coderabbit's qa * added memo and callback on the mouseover function * improve design library performance - apply useCallbacks, useMemo, and memo - fix preview when loading * fix preview when loading * fix to coderabbit's qa * fix spacingSize condition * add background color to footer --------- Co-authored-by: [email protected] <>
1 parent 5cc8b75 commit 1f652ed

File tree

12 files changed

+326
-245
lines changed

12 files changed

+326
-245
lines changed

‎src/block/design-library/edit.js‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ import { dispatch, select } from '@wordpress/data'
2626
import {
2727
createBlock, createBlocksFromInnerBlocksTemplate, getBlockVariations, getBlockType,
2828
} from '@wordpress/blocks'
29-
import { useRef, useState } from '@wordpress/element'
29+
import {
30+
useRef, useState, useCallback,
31+
} from '@wordpress/element'
3032
import { applyFilters } from '@wordpress/hooks'
3133
import {
3234
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -326,6 +328,47 @@ const Edit = props => {
326328
await addDesigns( true )
327329
}
328330

331+
const onClose = useCallback( () => setIsLibraryOpen( false ), [] )
332+
333+
const onSelect = useCallback( async ( _designs, callback, type ) => {
334+
const designs = []
335+
let disabledBlocks = new Set()
336+
337+
_designs.forEach( design => {
338+
const {
339+
designData, blocksForSubstitution, category,
340+
} = design
341+
342+
if ( blocksForSubstitution.size ) {
343+
disabledBlocks = disabledBlocks.union( blocksForSubstitution )
344+
}
345+
346+
designs.push( { designData, category } )
347+
} )
348+
349+
designsRef.current = designs
350+
disabledBlocksRef.current = disabledBlocks
351+
callbackRef.current = callback
352+
353+
if ( type === 'pages' ) {
354+
const allBlocks = select( 'core/block-editor' ).getBlockOrder()
355+
const blocksToRemove = allBlocks.filter( id => id !== clientId )
356+
357+
if ( blocksToRemove.length ) {
358+
blocksToRemoveRef.current = allBlocks
359+
setIsDialogOpen( DIALOG_OPTIONS.REMOVE_BLOCKS )
360+
return
361+
}
362+
}
363+
364+
if ( disabledBlocks.size ) {
365+
setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS )
366+
return
367+
}
368+
369+
await addDesigns( false )
370+
}, [] )
371+
329372
if ( attributes.previewMode ) {
330373
const src = previewImage.match( /https?:/i ) ? previewImage
331374
: srcUrl ? `${ srcUrl }/${ previewImage }`
@@ -356,47 +399,8 @@ const Edit = props => {
356399

357400
{ isLibraryOpen &&
358401
<ModalDesignLibrary
359-
onClose={ () => {
360-
setIsLibraryOpen( false )
361-
} }
362-
onSelect={ async ( _designs, callback, type ) => {
363-
const designs = []
364-
let disabledBlocks = new Set()
365-
366-
_designs.forEach( design => {
367-
const {
368-
designData, blocksForSubstitution, category,
369-
} = design
370-
371-
if ( blocksForSubstitution.size ) {
372-
disabledBlocks = disabledBlocks.union( blocksForSubstitution )
373-
}
374-
375-
designs.push( { designData, category } )
376-
} )
377-
378-
designsRef.current = designs
379-
disabledBlocksRef.current = disabledBlocks
380-
callbackRef.current = callback
381-
382-
if ( type === 'pages' ) {
383-
const allBlocks = select( 'core/block-editor' ).getBlockOrder()
384-
const blocksToRemove = allBlocks.filter( id => id !== clientId )
385-
386-
if ( blocksToRemove.length ) {
387-
blocksToRemoveRef.current = allBlocks
388-
setIsDialogOpen( DIALOG_OPTIONS.REMOVE_BLOCKS )
389-
return
390-
}
391-
}
392-
393-
if ( disabledBlocks.size ) {
394-
setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS )
395-
return
396-
}
397-
398-
await addDesigns( false )
399-
} }
402+
onClose={ onClose }
403+
onSelect={ onSelect }
400404
/>
401405
}
402406
{ isDialogOpen !== DIALOG_OPTIONS.CLOSE &&

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

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,63 @@ import { useAutoScroll } from './use-auto-scroll'
1111
/**
1212
* External dependencies.
1313
*/
14-
import { usePresetControls } from '~stackable/hooks'
1514
import { isPro, i18n } from 'stackable'
1615
import classnames from 'classnames'
1716
import { Tooltip } from '~stackable/components'
1817

1918
/**
2019
* WordPress dependencies.
2120
*/
22-
import { forwardRef, useState } from '@wordpress/element'
21+
import {
22+
useState, useRef, memo,
23+
} from '@wordpress/element'
2324
import { Dashicon, Spinner } from '@wordpress/components'
2425
import { __ } from '@wordpress/i18n'
2526

26-
const DesignLibraryListItem = forwardRef( ( props, ref ) => {
27+
const DesignLibraryListItem = memo( props => {
2728
const {
28-
label,
29-
plan,
30-
selectedNum = false,
31-
selectedData = null,
32-
previewSize,
33-
previewProps,
3429
selectedTab,
30+
plan, label,
31+
selectedNum,
32+
selectedData,
3533
isMultiSelectBusy,
34+
shouldRender,
35+
presetMarks,
3636
} = props
3737

38-
const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
39-
40-
const spacingSize = ! presetMarks || ! Array.isArray( presetMarks ) ? 120 : presetMarks[ presetMarks.length - 2 ].value
38+
const spacingSize = Array.isArray( presetMarks ) && presetMarks.length >= 2
39+
? presetMarks[ presetMarks.length - 2 ].value
40+
: 120
4141

4242
const [ isLoading, setIsLoading ] = useState( true )
4343

44-
const { hostRef, shadowRoot } = useShadowRoot()
44+
const { hostRef, shadowRoot } = useShadowRoot( shouldRender )
45+
46+
const ref = useRef( null )
4547

4648
const {
4749
blocks, enableBackground,
4850
shadowBodySizeRef, blocksForSubstitutionRef,
49-
onClickDesign,
50-
} = usePreviewRenderer(
51-
previewProps, previewSize, plan, spacingSize,
52-
selectedTab, selectedNum, selectedData,
53-
ref, hostRef, shadowRoot, setIsLoading,
54-
)
51+
previewSize, onClickDesign,
52+
updateShadowBodySize,
53+
} = usePreviewRenderer( props, shouldRender, spacingSize,
54+
ref, hostRef, shadowRoot, setIsLoading )
5555

5656
const {
5757
onMouseOut, onMouseOver, onMouseDown,
5858
} = useAutoScroll( hostRef, shadowBodySizeRef, selectedTab )
5959

6060
const getDesignPreviewSize = () => {
61-
if ( ! shadowRoot || isLoading ) {
62-
return 0
63-
}
61+
const tempHeight = selectedTab === 'pages' ? 345 : 100
6462

65-
return selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
63+
const previewHeight = selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
6664
: ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground )
65+
66+
if ( ! blocks || ! previewHeight ) {
67+
return tempHeight
68+
}
69+
70+
return previewHeight
6771
}
6872

6973
const mainClasses = classnames( [
@@ -100,7 +104,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
100104
showHideNote={ false }
101105
/>
102106
) }
103-
{ isLoading && <div className="stk-spinner-container"><Spinner /></div> }
107+
<div className={ `stk-spinner-container ${ isLoading || ! shouldRender ? '' : 'stk-hide-spinner' }` }><Spinner /></div>
104108
<div
105109
className="stk-block-design__host-container"
106110
style={ {
@@ -110,11 +114,14 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
110114
} }
111115
>
112116
<div className="stk-block-design__host" ref={ hostRef }>
113-
{ shadowRoot && ! isLoading && <DesignPreview
117+
{ shouldRender && shadowRoot && <DesignPreview
114118
blocks={ blocks }
115119
shadowRoot={ shadowRoot }
116120
selectedTab={ selectedTab }
121+
designIndex={ props.designIndex }
117122
onMouseDown={ onMouseDown }
123+
updateShadowBodySize={ updateShadowBodySize }
124+
setIsLoading={ setIsLoading }
118125
/> }
119126
</div>
120127
</div>

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@ export const DesignPreview = ( {
1313
blocks = '',
1414
shadowRoot,
1515
selectedTab,
16+
designIndex,
1617
onMouseDown = NOOP,
18+
updateShadowBodySize = NOOP,
19+
setIsLoading,
1720
} ) => {
1821
const ref = useRef( null )
22+
const wrapperRef = useRef( null )
1923

2024
const isDragging = useRef( false )
2125
const lastY = useRef( 0 )
@@ -77,13 +81,45 @@ export const DesignPreview = ( {
7781
'preview-pages': selectedTab === 'pages',
7882
} )
7983

84+
useEffect( () => {
85+
const wrapper = wrapperRef.current
86+
87+
if ( ! wrapper || ! blocks ) {
88+
return
89+
}
90+
91+
setIsLoading( true )
92+
93+
const ric = window.requestIdleCallback || ( cb => setTimeout( cb, designIndex * 20 ) )
94+
const sanitizedHTML = safeHTML( blocks )
95+
96+
if ( selectedTab !== 'pages' || designIndex < 9 ) {
97+
// insert HTML for patterns and for the first 9 pages
98+
wrapper.innerHTML = sanitizedHTML
99+
requestAnimationFrame( () => {
100+
ric( () => setIsLoading( false ) )
101+
} )
102+
return
103+
}
104+
105+
requestAnimationFrame( () => {
106+
ric( () => {
107+
wrapper.innerHTML = sanitizedHTML
108+
updateShadowBodySize()
109+
requestAnimationFrame( () => {
110+
ric( () => setIsLoading( false ) )
111+
} )
112+
} )
113+
} )
114+
}, [ blocks, shadowRoot ] ) // Only depend on blocks and shadowRoot; selectedTab and designIndex changes will cause blocks to update
115+
80116
return createPortal( <>
81117
<body
82118
ref={ ref }
83119
className={ shadowBodyClasses }
84120
>
85121
<div
86-
dangerouslySetInnerHTML={ { __html: safeHTML( blocks ) } }
122+
ref={ wrapperRef }
87123
style={ { pointerEvents: 'none' } } // prevent blocks from being clicked
88124
/>
89125
</body>

‎src/components/design-library-list/editor.scss‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
}
5959
footer {
6060
line-height: 18px;
61+
background-color: #fff;
6162
}
6263
.ugb-design-library-item__spinner {
6364
position: absolute;
@@ -227,14 +228,17 @@
227228

228229

229230
.ugb-design-library-items {
230-
.stk-spinner-container .components-spinner {
231-
display: block;
232-
margin: 50px auto;
233-
}
234-
235-
&.stk-design-library__item-pages .stk-spinner-container {
236-
height: 400px;
231+
.stk-spinner-container {
232+
height: 100%;
233+
width: 100%;
234+
position: absolute;
235+
transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.4, 1);
236+
will-change: opacity;
237+
opacity: 1;
237238
display: flex;
239+
&.stk-hide-spinner {
240+
opacity: 0;
241+
}
238242
.components-spinner {
239243
margin: auto;
240244
}

0 commit comments

Comments
 (0)