The following features had been implemented:

Loading spinners
Add new attributes to the agent
Bug fixing in the ui (partially. Still not capable to render properly the dropdown of agent responses)
Manage entity colors
Breadcrumbs
Dropdown with just one item
Improvement of content area display

ui/app/components/Chip/index.js

@@ -5,7 +5,7 @@ const Chip = ({ children, close, onClose }) => {
   return (
     <div className='chip'>
       {children}
-      {close ? <i onClick={onClose} className='close material-icons'>close</i> : null}
+      {close ? <i onClick={onClose} className='remove material-icons'>close</i> : null}
     </div>
   );
 };

ui/app/components/ColorPicker/index.js

@@ -0,0 +1,68 @@
+import React, { PropTypes } from 'react';
+import { CirclePicker } from 'react-color';
+
+function ColorPicker(props) { // eslint-disable-line react/prefer-stateless-function
+
+  const styles = {
+    color: {
+      borderRadius: '3px',
+      background: props.color,
+      width: '100%',
+      height: '2.2rem'
+    },
+    swatch_container: {
+      padding: '0',
+      height: '3.1rem',
+      border: '1px solid #c5cbd8',
+      borderRadius: '3px',
+    },
+    swatch: {
+      padding: '5px',
+      background: '#fff',
+      display: 'inline-block',
+      cursor: 'pointer',
+      width: '100%',
+    },
+    popover: {
+      background: '#FFFFFF',
+      border: '1px solid #c5cbd8',
+      borderRadius: '3px',
+      padding: '5px',
+      position: 'absolute',
+      zIndex: '999',
+    },
+    cover: {
+      position: 'fixed',
+      top: '0px',
+      right: '0px',
+      bottom: '0px',
+      left: '0px',
+    },
+  };
+
+  return (
+    <div className={`col s${props.s}`} style={ styles.swatch_container}>
+      <div style={ styles.swatch } onClick={ props.handleClick }>
+        <div style={ styles.color } />
+      </div>
+      { props.displayColorPicker ? <div style={ styles.popover }>
+        <div style={ styles.cover } onClick={ props.handleClose }/>
+        <CirclePicker width='176' color={ props.color } onChange={ props.handleColorChange } />
+      </div> : null }
+    </div>
+  );
+}
+
+ColorPicker.propTypes = {
+  handleClose: React.PropTypes.func,
+  handleClick: React.PropTypes.func,
+  handleColorChange: React.PropTypes.func,
+  color: React.PropTypes.string,
+  displayColorPicker: React.PropTypes.bool,
+};
+
+ColorPicker.defaultProps = {
+  s: 1,
+};
+
+export default ColorPicker;

ui/app/components/Header/index.js

@@ -2,19 +2,32 @@ import React from 'react';
 
 class Header extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+
+    const { breadcrumbs } = this.props;
+
     return (
       <header style={{position: 'fixed'}} className="valign-wrapper">
         <div className="nav-wrapper">
           <div className="col s12 ">
-            <a href="#!" className="breadcrumb">First</a>
-            <a href="#!" className="breadcrumb">Second</a>
-            <a href="#!" className="breadcrumb">Third</a>
-            <a href="#!" className="breadcrumb">Forth</a>
+            {
+              breadcrumbs.map( (breadcrumb, index) => {
+                if (breadcrumb.link){
+                  return <a key={`breadcrumb-${index}`} href={breadcrumb.link} className="breadcrumb">{breadcrumb.label}</a>
+                }
+                else {
+                  return <a key={`breadcrumb-${index}`} href='#' className="breadcrumb">{breadcrumb.label}</a>
+                }
+              })
+            }
           </div>
         </div>
       </header>
     );
   }
 }
 
+Header.propTypes = {
+  breadcrumbs: React.PropTypes.array.isRequired,
+};
+
 export default Header;

ui/app/components/InputLabel/index.js

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 function InputLabel(props) { // eslint-disable-line react/prefer-stateless-function
 
   return (
-    <div className="col input-field s12">
+    <div className={`col input-field s${props.s}`}>
       <label><FormattedMessage {...props.text} /></label>
     </div>
   );

ui/app/components/Preloader/Spinner.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Spinner = function Spinner(_ref) {
+  var color = _ref.color,
+      only = _ref.only;
+
+  var spinnerClasses = {
+    'spinner-layer': true
+  };
+  if (only) {
+    spinnerClasses['spinner-' + color + '-only'] = true;
+  } else {
+    spinnerClasses['spinner-' + color] = true;
+  }
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)(spinnerClasses) },
+    _react2.default.createElement(
+      'div',
+      { className: 'circle-clipper left' },
+      _react2.default.createElement('div', { className: 'circle' })
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'gap-patch' },
+      _react2.default.createElement('div', { className: 'circle' })
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'circle-clipper right' },
+      _react2.default.createElement('div', { className: 'circle' })
+    )
+  );
+};
+
+Spinner.defaultProps = {
+  only: true
+};
+
+Spinner.propTypes = {
+  color: _propTypes2.default.string,
+  only: _propTypes2.default.bool
+};
+
+exports.default = Spinner;

ui/app/components/Preloader/index.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Spinner = require('./Spinner');
+
+var _Spinner2 = _interopRequireDefault(_Spinner);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var colors = ['blue', 'red', 'yellow', 'green'];
+
+var Preloader = function (_Component) {
+  _inherits(Preloader, _Component);
+
+  function Preloader() {
+    _classCallCheck(this, Preloader);
+
+    return _possibleConstructorReturn(this, (Preloader.__proto__ || Object.getPrototypeOf(Preloader)).apply(this, arguments));
+  }
+
+  _createClass(Preloader, [{
+    key: 'render',
+    value: function render() {
+      var classes = {
+        'preloader-wrapper': true,
+        active: this.props.active
+      };
+
+      if (this.props.size) {
+        classes[this.props.size] = true;
+      }
+
+      var spinners = void 0;
+      if (this.props.flashing) {
+        spinners = [];
+        colors.map(function (color) {
+          spinners.push(_react2.default.createElement(_Spinner2.default, { color: color, only: false, key: color }));
+        });
+      } else {
+        spinners = _react2.default.createElement(_Spinner2.default, { color: this.props.color });
+      }
+      return _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(this.props.className, classes) },
+        spinners
+      );
+    }
+  }]);
+
+  return Preloader;
+}(_react.Component);
+
+Preloader.propTypes = {
+  className: _propTypes2.default.string,
+  /**
+   * The scale of the circle
+   * @default 'medium'
+   */
+  size: _propTypes2.default.oneOf(['big', 'small', 'medium']),
+  /**
+   * Whether to spin
+   * @default true
+   */
+  active: _propTypes2.default.bool,
+  /**
+   * The color of the circle, if not flashing
+   * @default 'blue'
+   */
+  color: _propTypes2.default.string,
+  /**
+   * Wheter to circle four different colors
+   * @default false
+   */
+  flashing: _propTypes2.default.bool
+};
+
+Preloader.defaultProps = {
+  active: true,
+  flashing: false,
+  color: 'blue'
+};
+
+exports.default = Preloader;

ui/app/containers/AgentDetailPage/index.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 
-import { Row } from 'react-materialize';
+import { Row,
+  Col,
+  } from 'react-materialize';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import Content from '../../components/Content';
 import Form from '../../components/Form';
 import FormTextInput from '../../components/FormTextInput';
 import Header from '../../components/Header';
 import SliderInput from '../../components/SliderInput';
+import Preloader from '../../components/Preloader';
+
 import { loadCurrentAgent } from '../App/actions';
 import {
   makeSelectCurrentAgent,
@@ -41,18 +45,28 @@ export class AgentDetailPage extends React.PureComponent { // eslint-disable-lin
       error,
       currentAgent,
     };
+
+    let breadcrumbs = [];
+
     if (!currentAgent) {
       return (<div>&nbsp;</div>);
     }
+    else {
+      breadcrumbs = [{ link: `/agent/${currentAgent.id}`, label: `Agent: ${currentAgent.agentName}`},];
+    }
+
     return (
       <div>
+        <Col style={{ zIndex: 2, position: 'fixed', top: '50%', left: '45%' }} s={12}>
+          { agentProps.loading ? <Preloader color='#00ca9f' size='big' /> : null }
+        </Col>
         <Helmet
           title={`Agent: ${currentAgent.agentName}`}
           meta={[
             { name: 'description', content: `Details for NLU Agent ${currentAgent.agentName}` },
           ]}
         />
-        <Header />
+        <Header breadcrumbs={breadcrumbs} />
         <Content>
           <Row>
             <header className="main-title"><h1><span>Agent: {currentAgent.agentName}</span></h1><p><span>{currentAgent.description}</span></p></header>

ui/app/containers/AgentPage/index.js

@@ -6,6 +6,7 @@ import Form from 'components/Form';
 import FormTextInput from 'components/FormTextInput';
 import Header from 'components/Header';
 import SliderInput from 'components/SliderInput';
+import Preloader from '../../components/Preloader';
 
 import {
   makeSelectAgent,
@@ -18,6 +19,7 @@ import Helmet from 'react-helmet';
 import {
   Input,
   Row,
+  Col,
 } from 'react-materialize';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
@@ -99,13 +101,16 @@ export class AgentPage extends React.PureComponent { // eslint-disable-line reac
 
     return (
       <div>
+        <Col style={{ zIndex: 2, position: 'fixed', top: '50%', left: '45%' }} s={12}>
+          { agentProps.loading ? <Preloader color='#00ca9f' size='big' /> : null }
+        </Col>
         <Helmet
           title="Create Agent"
           meta={[
             { name: 'description', content: 'Create your NLU agent' },
           ]}
         />
-        <Header />
+        <Header breadcrumbs={[{ label: '+ Creating agent'}, ]}/>
         <Content>
           <ContentHeader title={messages.createAgentTitle} subTitle={messages.createDescription} />
           <Form>