Support loading states

src/components/Alert.js

@@ -28,12 +28,21 @@ class Alert extends React.Component {
   }
 
   render() {
-    const {children, dismissable, is_open, ...otherProps} = this.props;
+    const {
+      children,
+      dismissable,
+      is_open,
+      loading_state,
+      ...otherProps
+    } = this.props;
     return (
       <RSAlert
         isOpen={this.state.alertOpen}
         toggle={dismissable && this.onDismiss}
         {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       >
         {children}
       </RSAlert>
@@ -95,7 +104,25 @@ Alert.propTypes = {
   /**
    * If true, add a close button that allows Alert to be dismissed.
    */
-  dismissable: PropTypes.bool
+  dismissable: PropTypes.bool,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default Alert;

src/components/Badge.js

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Badge as RSBadge} from 'reactstrap';
 
 const Badge = props => {
-  const {children, ...otherProps} = props;
-  return <RSBadge {...otherProps}>{children}</RSBadge>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSBadge
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSBadge>
+  );
 };
 
 Badge.propTypes = {
@@ -56,7 +65,25 @@ Badge.propTypes = {
   /**
    * HTML tag to use for the Badge. Default: span.
    */
-  tag: PropTypes.string
+  tag: PropTypes.string,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default Badge;

src/components/Button.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {Button as RSButton} from 'reactstrap';
 
 const Button = props => {
-  const {children, ...otherProps} = props;
+  const {children, loading_state, ...otherProps} = props;
   return (
     <RSButton
       onClick={() => {
@@ -15,6 +15,9 @@ const Button = props => {
         }
       }}
       {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
     >
       {children}
     </RSButton>
@@ -107,7 +110,25 @@ Button.propTypes = {
    * Set outline button style, which removes background images and colors for a
    * lightweight style.
    */
-  outline: PropTypes.bool
+  outline: PropTypes.bool,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default Button;

src/components/ButtonGroup.js

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {ButtonGroup as RSButtonGroup} from 'reactstrap';
 
 const ButtonGroup = props => {
-  const {children, ...otherProps} = props;
-  return <RSButtonGroup {...otherProps}>{children}</RSButtonGroup>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSButtonGroup
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSButtonGroup>
+  );
 };
 
 ButtonGroup.propTypes = {
@@ -45,7 +54,25 @@ ButtonGroup.propTypes = {
   /**
    * Size of button group, options: 'sm', 'md', 'lg'.
    */
-  size: PropTypes.string
+  size: PropTypes.string,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default ButtonGroup;

src/components/Collapse.js

@@ -3,9 +3,15 @@ import PropTypes from 'prop-types';
 import {Collapse as RSCollapse} from 'reactstrap';
 
 const Collapse = props => {
-  const {children, is_open, ...otherProps} = props;
+  const {children, is_open, loading_state, ...otherProps} = props;
   return (
-    <RSCollapse isOpen={is_open} {...otherProps}>
+    <RSCollapse
+      isOpen={is_open}
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
       {children}
     </RSCollapse>
   );
@@ -54,7 +60,25 @@ Collapse.propTypes = {
   /**
    * Set to True when using a collapse inside a navbar.
    */
-  navbar: PropTypes.bool
+  navbar: PropTypes.bool,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default Collapse;

src/components/DropdownMenu.js

@@ -31,6 +31,7 @@ class DropdownMenu extends React.Component {
       in_navbar,
       addon_type,
       bs_size,
+      loading_state,
       ...otherProps
     } = this.props;
     return (
@@ -43,6 +44,9 @@ class DropdownMenu extends React.Component {
         addonType={addon_type}
         size={bs_size}
         {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       >
         <DropdownToggle nav={nav} caret={caret} disabled={disabled}>
           {label}
@@ -132,7 +136,25 @@ DropdownMenu.propTypes = {
    * Size of the dropdown. 'sm' corresponds to small, 'md' to medium
    * and 'lg' to large.
    */
-  bs_size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  bs_size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default DropdownMenu;

src/components/DropdownMenuItem.js

@@ -21,7 +21,7 @@ class DropdownMenuItem extends React.Component {
   }
 
   render() {
-    let {children, href, ...otherProps} = this.props;
+    let {children, href, loading_state, ...otherProps} = this.props;
     const useLink = href && !this.props.disabled;
     otherProps[useLink ? 'preOnClick' : 'onClick'] = this.incrementClicks;
     return (
@@ -31,6 +31,9 @@ class DropdownMenuItem extends React.Component {
         // as link and the cursor becomes a pointer on hover
         href={this.props.disabled ? null : href}
         {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       >
         {children}
       </RSDropdownItem>
@@ -116,7 +119,25 @@ DropdownMenuItem.propTypes = {
    * at which n_clicks changed. This can be used to tell
    * which button was changed most recently.
    */
-  n_clicks_timestamp: PropTypes.number
+  n_clicks_timestamp: PropTypes.number,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 DropdownMenuItem.defaultProps = {

src/components/Fade.js

@@ -3,13 +3,23 @@ import PropTypes from 'prop-types';
 import {Fade as RSFade} from 'reactstrap';
 
 const Fade = props => {
-  const {children, base_class, base_class_active, is_in, ...otherProps} = props;
+  const {
+    children,
+    base_class,
+    base_class_active,
+    is_in,
+    loading_state,
+    ...otherProps
+  } = props;
   return (
     <RSFade
       baseClass={base_class}
       baseClassActive={base_class_active}
       in={is_in}
       {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
     >
       {children}
     </RSFade>
@@ -93,7 +103,25 @@ Fade.propTypes = {
   /**
    * CSS class used when the fade contents are displayed. Default: 'show'.
    */
-  base_class_active: PropTypes.string
+  base_class_active: PropTypes.string,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
 };
 
 export default Fade;