Skip to content

Commit

Permalink
asset pre-fetching
Browse files Browse the repository at this point in the history
  • Loading branch information
marekhrabe committed Aug 21, 2019
1 parent ff7d445 commit fdf6504
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
import { isEmpty, reduce } from 'lodash';
import { __, sprintf } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { Button, Modal } from '@wordpress/components';
import { Button, Modal, Spinner } from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';
import { withDispatch, withSelect } from '@wordpress/data';
import { Component } from '@wordpress/element';
import ensureAssets from './utils/ensure-assets';
import '@wordpress/nux';

/**
Expand Down Expand Up @@ -35,6 +36,8 @@ class PageTemplateModal extends Component {
slug: '',
title: '',
blocks: {},
error: null,
isOpen: false,
};

constructor( props ) {
Expand Down Expand Up @@ -64,19 +67,38 @@ class PageTemplateModal extends Component {
}

setTemplate = ( slug, title ) => {
this.setState( { isOpen: false } );
trackSelection( this.props.segment.id, this.props.vertical.id, slug );
this.setState( {
error: null,
isLoading: true,
} );

this.props.saveTemplateChoice( slug );
trackSelection( this.props.segment.id, this.props.vertical.id, slug );

const previewBlocks = this.state.blocks[ slug ];
const blocks = this.state.blocks[ slug ];

// Skip inserting if there's nothing to insert.
if ( ! previewBlocks || ! previewBlocks.length ) {
if ( ! blocks || ! blocks.length ) {
return;
}

this.props.insertTemplate( title, previewBlocks );
// Make sure all blocks use local assets before inserting.
ensureAssets( blocks )
.then( blocksWithAssets => {
// Don't insert anything if the user clicked Cancel/Close
// before we loaded everything.
if ( ! this.state.isOpen ) {
return;
}
this.props.saveTemplateChoice( slug );
this.props.insertTemplate( title, blocksWithAssets );
this.setState( { isOpen: false } );
} )
.catch( error => {
this.setState( {
isLoading: false,
error,
} );
} );
};

handleConfirmation = () => this.setTemplate( this.state.slug, this.state.title );
Expand Down Expand Up @@ -123,22 +145,31 @@ class PageTemplateModal extends Component {
overlayClassName="page-template-modal-screen-overlay"
>
<div className="page-template-modal__inner">
<form className="page-template-modal__form">
<fieldset className="page-template-modal__list">
<TemplateSelectorControl
label={ __( 'Template', 'full-site-editing' ) }
templates={ this.props.templates }
blocksByTemplates={ this.state.blocks }
onTemplateSelect={ this.previewTemplate }
useDynamicPreview={ true }
siteInformation={ siteInformation }
{ this.state.isLoading ? (
<div className="page-template-modal__loading">
<Spinner />
{ __( 'Inserting template…', 'full-site-editing' ) }
</div>
) : (
<>
<form className="page-template-modal__form">
<fieldset className="page-template-modal__list">
<TemplateSelectorControl
label={ __( 'Template', 'full-site-editing' ) }
templates={ this.props.templates }
blocksByTemplates={ this.state.blocks }
onTemplateSelect={ this.previewTemplate }
useDynamicPreview={ true }
siteInformation={ siteInformation }
/>
</fieldset>
</form>
<TemplateSelectorPreview
blocks={ this.getBlocksByTemplateSlug() }
viewportWidth={ 960 }
/>
</fieldset>
</form>
<TemplateSelectorPreview
blocks={ this.getBlocksByTemplateSlug() }
viewportWidth={ 960 }
/>
</>
) }
</div>
<div className="page-template-modal__buttons">
<Button isDefault isLarge onClick={ this.closeModal }>
Expand All @@ -147,7 +178,7 @@ class PageTemplateModal extends Component {
<Button
isPrimary
isLarge
disabled={ isEmpty( this.state.slug ) }
disabled={ isEmpty( this.state.slug ) || this.state.isLoading }
onClick={ this.handleConfirmation }
>
{ sprintf( __( 'Use %s template', 'full-site-editing' ), this.state.title ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -323,3 +323,16 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
height: 100%;
}
}

.page-template-modal__loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
display: flex;
align-items: flex-end;
}

.page-template-modal__loading .components-spinner {
float: none;
}

0 comments on commit fdf6504

Please sign in to comment.