/
template-preview.js
44 lines (36 loc) · 1.06 KB
/
template-preview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
* External dependencies
*/
import PropTypes from 'prop-types';
/**
* WordPress dependencies
*/
import { withSafeTimeout } from '@wordpress/compose';
import { Spinner } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import { BlockPreview } from '../';
const TemplatePreview = ( { item, setTimeout } ) => {
const [ shouldLoad, setShouldLoad ] = useState( false );
// @todo Look into React Concurrent mode to replace this once it gets available.
// Set timeout to cause a small latency between loading the templates, otherwise they all try to load instantly and cause a lag.
useEffect( () => setTimeout( setShouldLoad, 100, true ), [ setTimeout ] );
if ( ! shouldLoad ) {
return <Spinner />;
}
return (
<BlockPreview
name="core/block"
attributes={ { ref: item.id } }
/>
);
};
TemplatePreview.propTypes = {
item: PropTypes.shape( {
id: PropTypes.number.isRequired,
} ).isRequired,
setTimeout: PropTypes.func.isRequired,
};
export default withSafeTimeout( TemplatePreview );