Loading states api

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.17.0] - 2018-12-17
+### Added
+- Loading states API [#267](https://github.com/plotly/dash/issues/267)
+
 ## [0.16.1] - 2018-12-14
 ### Fixed
 - Added `key` to rendered components, fixing [#379](https://github.com/plotly/dash-core-components/issues/379)

dash_renderer/dash_renderer.dev.js

@@ -34294,7 +34294,6 @@ var UnconnectedContainer = function (_Component) {
                 layoutRequest = _props.layoutRequest,
                 layout = _props.layout;
 
-
             if (layoutRequest.status && !(0, _ramda.contains)(layoutRequest.status, [_constants2.STATUS.OK, 'loading'])) {
                 return _react2.default.createElement(
                     'div',
@@ -34311,14 +34310,20 @@ var UnconnectedContainer = function (_Component) {
                 return _react2.default.createElement(
                     'div',
                     { id: '_dash-app-content' },
-                    _react2.default.createElement(_TreeContainer2.default, { layout: layout })
+                    _react2.default.createElement(_TreeContainer2.default, { layout: layout, loading: false })
+                );
+            }
+            if ((0, _ramda.isEmpty)(layout)) {
+                return _react2.default.createElement(
+                    'div',
+                    { id: '_dash-app-content' },
+                    _react2.default.createElement(_TreeContainer2.default, { layout: layout, loading: true })
                 );
             }
-
             return _react2.default.createElement(
                 'div',
-                { className: '_dash-loading' },
-                'Loading...'
+                { id: '_dash-app-content' },
+                _react2.default.createElement(_TreeContainer2.default, { layout: layout, loading: true })
             );
         }
     }]);
@@ -34902,7 +34907,7 @@ var TreeContainer = function (_Component) {
     }, {
         key: 'render',
         value: function render() {
-            return _render(this.props.layout);
+            return recursivelyRender(this.props.layout, this.props.loading);
         }
     }]);
 
@@ -34913,14 +34918,21 @@ exports.default = TreeContainer;
 
 
 TreeContainer.propTypes = {
-    layout: _propTypes2.default.object
+    layout: _propTypes2.default.object,
+    loading: _propTypes2.default.bool
 };
 
-function _render(component) {
+function recursivelyRender(component) {
+    var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
     if (_ramda2.default.contains(_ramda2.default.type(component), ['String', 'Number', 'Null', 'Boolean'])) {
         return component;
     }
 
+    if (_ramda2.default.isEmpty(component)) {
+        return null;
+    }
+
     // Create list of child elements
     var children = void 0;
 
@@ -34935,7 +34947,9 @@ function _render(component) {
         // One or multiple objects
         // Recursively render the tree
         // TODO - I think we should pass in `key` here.
-        children = (Array.isArray(componentProps.children) ? componentProps.children : [componentProps.children]).map(_render);
+        children = (Array.isArray(componentProps.children) ? componentProps.children : [componentProps.children]).map(function (child) {
+            return recursivelyRender(child, loading);
+        });
     }
 
     if (!component.type) {
@@ -34956,12 +34970,12 @@ function _render(component) {
 
     return _react2.default.createElement(
         _NotifyObservers2.default,
-        { key: componentProps.id, id: componentProps.id },
+        { key: componentProps.id, id: componentProps.id, loading: loading },
         parent
     );
 }
 
-_render.propTypes = {
+recursivelyRender.propTypes = {
     children: _propTypes2.default.object
 };
 
@@ -35949,6 +35963,8 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/lib/index.js");
 
 var _ramda = __webpack_require__(/*! ramda */ "./node_modules/ramda/index.js");
@@ -35963,6 +35979,8 @@ var _propTypes = __webpack_require__(/*! prop-types */ "./node_modules/prop-type
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _constants = __webpack_require__(/*! ../../constants/constants */ "./src/constants/constants.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /*
@@ -35973,7 +35991,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function mapStateToProps(state) {
     return {
         dependencies: state.dependenciesRequest.content,
-        paths: state.paths
+        paths: state.paths,
+        requestQueue: state.requestQueue
     };
 }
 
@@ -35989,6 +36008,8 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
         children: ownProps.children,
         dependencies: stateProps.dependencies,
         paths: stateProps.paths,
+        loading: ownProps.loading,
+        requestQueue: stateProps.requestQueue,
 
         fireEvent: function fireEvent(_ref) {
             var event = _ref.event;
@@ -36018,8 +36039,37 @@ function NotifyObserversComponent(_ref2) {
         id = _ref2.id,
         paths = _ref2.paths,
         dependencies = _ref2.dependencies,
+        loading = _ref2.loading,
         fireEvent = _ref2.fireEvent,
-        setProps = _ref2.setProps;
+        setProps = _ref2.setProps,
+        requestQueue = _ref2.requestQueue;
+
+    // loading prop coming from TreeContainer
+    var isLoading = loading;
+    var loadingProp = void 0;
+    var loadingComponent = void 0;
+
+    (0, _ramda.forEach)(function (r) {
+        var controllerId = (0, _ramda.isNil)(r.controllerId) ? '' : r.controllerId;
+        if (r.status === 'loading' && (0, _ramda.contains)(id, controllerId)) {
+            isLoading = true;
+
+            var _r$controllerId$split = r.controllerId.split('.');
+
+            var _r$controllerId$split2 = _slicedToArray(_r$controllerId$split, 2);
+
+            loadingComponent = _r$controllerId$split2[0];
+            loadingProp = _r$controllerId$split2[1];
+        }
+    }, requestQueue);
+
+    var thisRequest = requestQueue.filter(function (r) {
+        var controllerId = (0, _ramda.isNil)(r.controllerId) ? '' : r.controllerId;
+        return (0, _ramda.contains)(id, controllerId);
+    });
+    if (thisRequest.status === _constants.STATUS.OK) {
+        isLoading = false;
+    }
 
     var thisComponentTriggersEvents = dependencies && dependencies.find(function (dependency) {
         return dependency.events.find(function (event) {
@@ -36062,6 +36112,13 @@ function NotifyObserversComponent(_ref2) {
         extraProps.fireEvent = fireEvent;
     }
 
+    // Set loading state
+    extraProps.loading_state = {
+        is_loading: isLoading,
+        prop_name: loadingProp,
+        component_name: loadingComponent
+    };
+
     if (!(0, _ramda.isEmpty)(extraProps)) {
         return _react2.default.cloneElement(children, extraProps);
     }
@@ -36071,7 +36128,8 @@ function NotifyObserversComponent(_ref2) {
 NotifyObserversComponent.propTypes = {
     id: _propTypes2.default.string.isRequired,
     children: _propTypes2.default.node.isRequired,
-    path: _propTypes2.default.array.isRequired
+    path: _propTypes2.default.array.isRequired,
+    loading: _propTypes2.default.bool
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps, mergeProps)(NotifyObserversComponent);

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.16.1'
+__version__ = '0.17.0rc1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "0.16.1",
+  "version": "0.17.0-rc1",
   "description": "render dash components in react",
   "main": "src/index.js",
   "scripts": {

src/APIController.react.js

@@ -73,15 +73,13 @@ class UnconnectedContainer extends Component {
             dispatch(hydrateInitialOutputs());
         }
     }
-
     render() {
         const {
             appLifecycle,
             dependenciesRequest,
             layoutRequest,
             layout,
         } = this.props;
-
         if (
             layoutRequest.status &&
             !contains(layoutRequest.status, [STATUS.OK, 'loading'])
@@ -99,12 +97,22 @@ class UnconnectedContainer extends Component {
         } else if (appLifecycle === getAppState('HYDRATED')) {
             return (
                 <div id="_dash-app-content">
-                    <TreeContainer layout={layout} />
+                    <TreeContainer layout={layout} loading={false} />
                 </div>
             );
         }
-
-        return <div className="_dash-loading">{'Loading...'}</div>;
+        if (isEmpty(layout)) {
+            return (
+                <div id="_dash-app-content">
+                    <TreeContainer layout={layout} loading={true} />
+                </div>
+            );
+        }
+        return (
+            <div id="_dash-app-content">
+                <TreeContainer layout={layout} loading={true} />
+            </div>
+        );
     }
 }
 UnconnectedContainer.propTypes = {

src/TreeContainer.js

@@ -12,21 +12,26 @@ export default class TreeContainer extends Component {
     }
 
     render() {
-        return render(this.props.layout);
+        return recursivelyRender(this.props.layout, this.props.loading);
     }
 }
 
 TreeContainer.propTypes = {
     layout: PropTypes.object,
+    loading: PropTypes.bool
 };
 
-function render(component) {
+function recursivelyRender(component, loading = false) {
     if (
         R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
     ) {
         return component;
     }
 
+    if(R.isEmpty(component)) {
+        return null;
+    }
+
     // Create list of child elements
     let children;
 
@@ -55,7 +60,9 @@ function render(component) {
         children = (Array.isArray(componentProps.children)
             ? componentProps.children
             : [componentProps.children]
-        ).map(render);
+        ).map(child => {
+            return recursivelyRender(child, loading);
+        });
     }
 
     if (!component.type) {
@@ -78,9 +85,9 @@ function render(component) {
         ...children
     );
 
-    return <NotifyObservers key={componentProps.id} id={componentProps.id}>{parent}</NotifyObservers>;
+    return <NotifyObservers key={componentProps.id} id={componentProps.id} loading={loading}>{parent}</NotifyObservers>;
 }
 
-render.propTypes = {
+recursivelyRender.propTypes = {
     children: PropTypes.object,
 };

src/components/core/NotifyObservers.react.js

@@ -1,8 +1,9 @@
 import {connect} from 'react-redux';
-import {isEmpty} from 'ramda';
+import {isNil, contains, isEmpty, forEach} from 'ramda';
 import {notifyObservers, updateProps} from '../../actions';
 import React from 'react';
 import PropTypes from 'prop-types';
+import {STATUS} from '../../constants/constants';
 
 /*
  * NotifyObservers passes a connected `setProps` handler down to
@@ -13,6 +14,7 @@ function mapStateToProps(state) {
     return {
         dependencies: state.dependenciesRequest.content,
         paths: state.paths,
+        requestQueue: state.requestQueue,
     };
 }
 
@@ -27,6 +29,8 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
         children: ownProps.children,
         dependencies: stateProps.dependencies,
         paths: stateProps.paths,
+        loading: ownProps.loading,
+        requestQueue: stateProps.requestQueue,
 
         fireEvent: function fireEvent({event}) {
             // Update this component's observers with the updated props
@@ -53,12 +57,33 @@ function NotifyObserversComponent({
     children,
     id,
     paths,
-
     dependencies,
-
+    loading,
     fireEvent,
     setProps,
+    requestQueue,
 }) {
+    // loading prop coming from TreeContainer
+    let isLoading = loading;
+    let loadingProp;
+    let loadingComponent;
+
+    forEach(r => {
+        const controllerId = isNil(r.controllerId) ? '' : r.controllerId;
+        if (r.status === 'loading' && contains(id, controllerId)) {
+            isLoading = true;
+            [loadingComponent, loadingProp] = r.controllerId.split('.');
+        }
+    }, requestQueue);
+
+    const thisRequest = requestQueue.filter(r => {
+        const controllerId = isNil(r.controllerId) ? '' : r.controllerId;
+        return contains(id, controllerId);
+    });
+    if (thisRequest.status === STATUS.OK) {
+        isLoading = false;
+    }
+
     const thisComponentTriggersEvents =
         dependencies &&
         dependencies.find(dependency =>
@@ -102,6 +127,13 @@ function NotifyObserversComponent({
         extraProps.fireEvent = fireEvent;
     }
 
+    // Set loading state
+    extraProps.loading_state = {
+        is_loading: isLoading,
+        prop_name: loadingProp,
+        component_name: loadingComponent,
+    };
+
     if (!isEmpty(extraProps)) {
         return React.cloneElement(children, extraProps);
     }
@@ -112,6 +144,7 @@ NotifyObserversComponent.propTypes = {
     id: PropTypes.string.isRequired,
     children: PropTypes.node.isRequired,
     path: PropTypes.array.isRequired,
+    loading: PropTypes.bool,
 };
 
 export default connect(