Merge pull request silverstripe#316 from creative-commoners/pulls/4.0…

…/loading-indicator

FIX ElementList shows loading indicator while GraphQL query fetches list of blocks

client/src/components/ElementEditor/Element.scss

@@ -1,12 +1,17 @@
 .element-editor__element {
-  display: block;
+  border-bottom: 1px solid $border-color-light;
   color: inherit;
   cursor: pointer;
+  display: block;
   padding: $panel-padding-x;
 
   &:hover {
     text-decoration: inherit;
     color: inherit;
     background-color: $table-hover-bg;
   }
+
+  &:last-child {
+    border-bottom: 0;
+  }
 }

client/src/components/ElementEditor/ElementList.js

@@ -24,9 +24,24 @@ class ElementList extends Component {
     ));
   }
 
+  /**
+   * Renders a loading component
+   *
+   * @returns {LoadingComponent|null}
+   */
+  renderLoading() {
+    const { loading, LoadingComponent } = this.props;
+
+    if (loading) {
+      return <LoadingComponent />;
+    }
+    return null;
+  }
+
   render() {
     return (
       <div className="elemental-editor__list">
+        {this.renderLoading()}
         {this.renderBlocks()}
       </div>
     );
@@ -36,18 +51,21 @@ class ElementList extends Component {
 ElementList.propTypes = {
   // @todo support either ElementList or Element children in an array (or both)
   blocks: PropTypes.arrayOf(elementType),
+  loading: PropTypes.bool,
 };
 
 ElementList.defaultProps = {
   blocks: [],
+  loading: false,
 };
 
 export { ElementList as Component };
 
 export default inject(
-  ['Element'],
-  (ElementComponent) => ({
+  ['Element', 'Loading'],
+  (ElementComponent, LoadingComponent) => ({
     ElementComponent,
+    LoadingComponent,
   }),
   () => 'ElementEditor.ElementList'
 )(ElementList);

client/src/components/ElementEditor/ElementList.scss

@@ -1,11 +1,9 @@
 .elemental-editor__list {
   background-color:  $white;
-
+  border-bottom: 1px solid $border-color-light;
+  border-top: 1px solid $border-color-light;
   margin-left: -$panel-padding-x;
   margin-right: -$panel-padding-x;
-  border-top: 1px solid $border-color-light;
-
-  > .element-editor__element {
-    border-bottom: 1px solid $border-color-light;
-  }
+  min-height: 6rem;
+  position: relative;
 }