Add loading and missing post states

Closes #211
Automattic · Nov 18, 2019 · c9d9797 · c9d9797
1 parent cd713c8
commit c9d9797
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/blocks/query/edit.js b/src/blocks/query/edit.js
@@ -21,7 +21,7 @@ import {
 	WritingFlow,
 } from '@wordpress/block-editor';
 import { cloneBlock, createBlock } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, Placeholder, Spinner } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { EntityProvider } from '@wordpress/core-data';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -122,7 +122,15 @@ class Edit extends Component {
 					</PanelBody>
 				</InspectorControls>
 				<Fragment>
-					{ ( query || [] ).map( post => {
+					{ ! query && (
+						<Placeholder>
+							<Spinner />
+						</Placeholder>
+					) }
+					{ query && ! query.length && (
+						<Placeholder>{ __( 'Sorry, no posts were found.', 'newspack-blocks' ) }</Placeholder>
+					) }
+					{ query && !! query.length && query.map( post => {
 						if ( ! blocksTree[ post.id ] ) return null;
 						return (
 							<article className={ post.id === editingPost ? 'is-editing' : '' } key={ post.id }>

diff --git a/src/blocks/query/store/index.js → src/blocks/query/store.js b/src/blocks/query/store/index.js → src/blocks/query/store.js
diff --git a/src/components/query-panel/index.js b/src/components/query-panel/index.js
@@ -9,8 +9,6 @@ import AutocompleteTokenField from '../../blocks/homepage-articles/components/au
  */
 import apiFetch from '@wordpress/api-fetch';
 import { BaseControl } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
 import { Component, Fragment } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';