Loading states api

CHANGELOG.md

@@ -2,6 +2,8 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.16.0] - 2018-11-30
+- Loading states API [#267](https://github.com/plotly/dash/issues/267)
 ## [0.15.1] - 2018-11-17
 ### Fixed
 - Fix a bug in the ON_PROP_CHANGE callback where history was not correctly set when acting on more than one component. In particular, the 'undo' button should now work as expected. Fixes [#66](https://github.com/plotly/dash-renderer/issues/66).

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.15.1'
+__version__ = '0.16.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "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 id={componentProps.id}>{parent}</NotifyObservers>;
+    return <NotifyObservers 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(

src/components/core/Reloader.react.js

@@ -51,7 +51,7 @@ class Reloader extends React.Component {
                 ) {
                     // Look if it was a css file.
                     let was_css = false;
-                    for (let a of reloadRequest.content.files) {
+                    for (const a of reloadRequest.content.files) {
                         if (a.is_css) {
                             was_css = true;
                             const nodesToDisable = [];