Skip to content

Commit 2c2e380

Browse files
kaeizenkaeizen
committed
show spinner while inserting designs
1 parent 3a89b4a commit 2c2e380

File tree

1 file changed

+84
-68
lines changed

1 file changed

+84
-68
lines changed

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

Lines changed: 84 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { applyFilters } from '@wordpress/hooks'
3131
import {
3232
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
3333
Placeholder, Modal, __experimentalVStack as VStack, Flex,
34+
Spinner,
3435
} from '@wordpress/components'
3536
import { useBlockProps } from '@wordpress/block-editor'
3637
import apiFetch from '@wordpress/api-fetch'
@@ -95,6 +96,7 @@ const Edit = props => {
9596

9697
const [ isLibraryOpen, setIsLibraryOpen ] = useState( false )
9798
const [ isDialogOpen, setIsDialogOpen ] = useState( DIALOG_OPTIONS.CLOSE )
99+
const [ isInserting, setIsInserting ] = useState( false )
98100

99101
const designsRef = useRef( [] )
100102
const disabledBlocksRef = useRef( [] )
@@ -237,11 +239,14 @@ const Edit = props => {
237239
}
238240

239241
const addDesigns = async substituteBlocks => {
242+
setIsInserting( true )
240243
const { getBlockRootClientId } = select( 'core/block-editor' )
241244
const parentClientId = getBlockRootClientId( clientId )
242245

243246
if ( ! designsRef.current?.length ) {
244247
console.error( 'Design library selection failed: No designs found' ) // eslint-disable-line no-console
248+
setIsInserting( false )
249+
return
245250
}
246251

247252
const designs = designsRef.current
@@ -264,6 +269,7 @@ const Edit = props => {
264269
}
265270

266271
if ( ! blocks.length ) {
272+
setIsInserting( false )
267273
return
268274
}
269275

@@ -284,6 +290,8 @@ const Edit = props => {
284290
if ( callbackRef.current ) {
285291
callbackRef.current()
286292
}
293+
294+
setIsInserting( false )
287295
}
288296

289297
const onClickTertiary = () => {
@@ -395,7 +403,10 @@ const Edit = props => {
395403
<Modal
396404
className="ugb-design-library__confirm-dialog"
397405
title={ __( 'Stackable Design Library', i18n ) }
398-
onRequestClose={ () => setIsDialogOpen( DIALOG_OPTIONS.CLOSE ) }
406+
onRequestClose={ () => {
407+
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
408+
setIsInserting( false )
409+
} }
399410
>
400411
<VStack spacing={ 8 }>
401412
{ isDialogOpen === DIALOG_OPTIONS.REMOVE_BLOCKS && <>
@@ -405,53 +416,55 @@ const Edit = props => {
405416
</p>
406417
</div>
407418
<Flex direction="column" align="stretch">
408-
<Button
409-
__next40pxDefaultSize
410-
variant="primary"
411-
onClick={ () => {
412-
insertIndexRef.current = 0
413-
if ( disabledBlocksRef.current.size ) {
419+
{ isInserting ? <Spinner style={ { margin: '0 auto' } } /> : <>
420+
<Button
421+
__next40pxDefaultSize
422+
variant="primary"
423+
onClick={ () => {
424+
insertIndexRef.current = 0
425+
if ( disabledBlocksRef.current.size ) {
414426
// Close this dialog and reopen after a while to show the notice for disabled blocks
415427
// The existing blocks will be removed later
428+
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
429+
setTimeout( () => setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS ), 500 )
430+
return
431+
}
432+
433+
addDesigns( false )
434+
} }
435+
>
436+
{ __( 'Replace existing content with page design', i18n ) }
437+
</Button>
438+
<Button
439+
__next40pxDefaultSize
440+
variant="secondary"
441+
onClick={ () => {
442+
insertIndexRef.current = blocksToRemoveRef.current.length
443+
// When appending the page design, only remove the design library block
444+
blocksToRemoveRef.current = [ clientId ]
445+
446+
if ( disabledBlocksRef.current.size ) {
447+
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
448+
setTimeout( () => setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS ), 500 )
449+
450+
return
451+
}
452+
addDesigns( false )
453+
} }
454+
>
455+
{ __( 'Append page design only', i18n ) }
456+
</Button>
457+
<Button
458+
__next40pxDefaultSize
459+
variant="tertiary"
460+
onClick={ () => {
461+
blocksToRemoveRef.current = []
416462
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
417-
setTimeout( () => setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS ), 500 )
418-
return
419-
}
420-
421-
addDesigns( false )
422-
} }
423-
>
424-
{ __( 'Replace existing content with page design', i18n ) }
425-
</Button>
426-
<Button
427-
__next40pxDefaultSize
428-
variant="secondary"
429-
onClick={ () => {
430-
insertIndexRef.current = blocksToRemoveRef.current.length
431-
// When appending the page design, only remove the design library block
432-
blocksToRemoveRef.current = [ clientId ]
433-
434-
if ( disabledBlocksRef.current.size ) {
435-
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
436-
setTimeout( () => setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS ), 500 )
437-
438-
return
439-
}
440-
addDesigns( false )
441-
} }
442-
>
443-
{ __( 'Append page design only', i18n ) }
444-
</Button>
445-
<Button
446-
__next40pxDefaultSize
447-
variant="tertiary"
448-
onClick={ () => {
449-
blocksToRemoveRef.current = []
450-
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
451463
} }
452-
>
453-
{ __( 'Cancel', i18n ) }
454-
</Button>
464+
>
465+
{ __( 'Cancel', i18n ) }
466+
</Button>
467+
</> }
455468
</Flex>
456469
</> }
457470
{ isDialogOpen === DIALOG_OPTIONS.DISABLED_BLOCKS && <>
@@ -463,30 +476,33 @@ const Edit = props => {
463476
<p> { __( 'These blocks can be enabled in the Stackable settings page. Do you want to keep the disabled blocks or substitute them with other Stackable or core blocks?', i18n ) }</p>
464477
</div>
465478
<Flex direction="column" align="stretch">
466-
<Button
467-
__next40pxDefaultSize
468-
style={ { textAlign: 'center' } }
469-
variant="primary"
470-
onClick={ () => onClickPrimary() }
471-
>
472-
{ __( 'Add patterns and substitute blocks', i18n ) }
473-
</Button>
474-
<Button
475-
__next40pxDefaultSize
476-
style={ { textAlign: 'center', marginBottom: '16px' } }
477-
variant="secondary"
478-
onClick={ () => onClickSecondary() }
479-
>
480-
{ __( 'Add patterns only (no substitutes)', i18n ) }
481-
</Button>
482-
<Button
483-
__next40pxDefaultSize
484-
style={ { textAlign: 'center', marginBottom: '16px' } }
485-
variant="tertiary"
486-
onClick={ () => onClickTertiary() }
487-
>
488-
{ __( 'Enable blocks in settings', i18n ) }
489-
</Button>
479+
{ isInserting ? <Spinner style={ { margin: '0 auto' } } /> : <>
480+
<Button
481+
__next40pxDefaultSize
482+
style={ { textAlign: 'center' } }
483+
variant="primary"
484+
onClick={ () => onClickPrimary() }
485+
>
486+
{ __( 'Add patterns and substitute blocks', i18n ) }
487+
</Button>
488+
<Button
489+
__next40pxDefaultSize
490+
style={ { textAlign: 'center', marginBottom: '16px' } }
491+
variant="secondary"
492+
onClick={ () => onClickSecondary() }
493+
>
494+
{ __( 'Add patterns only (no substitutes)', i18n ) }
495+
</Button>
496+
<Button
497+
__next40pxDefaultSize
498+
style={ { textAlign: 'center', marginBottom: '16px' } }
499+
variant="tertiary"
500+
onClick={ () => onClickTertiary() }
501+
>
502+
{ __( 'Enable blocks in settings', i18n ) }
503+
</Button>
504+
</> }
505+
490506
</Flex>
491507
</> }
492508
</VStack>

0 commit comments

Comments
 (0)