diff --git a/src/components/Alert.js b/src/components/Alert.js
index 3f92f0e22..2a8675869 100644
--- a/src/components/Alert.js
+++ b/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;
diff --git a/src/components/Badge.js b/src/components/Badge.js
index 5d12ae2ac..e2cb0749e 100644
--- a/src/components/Badge.js
+++ b/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;
diff --git a/src/components/Button.js b/src/components/Button.js
index c5ee3e736..b66c05125 100644
--- a/src/components/Button.js
+++ b/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;
diff --git a/src/components/ButtonGroup.js b/src/components/ButtonGroup.js
index a5f1dc264..dca3f80d9 100644
--- a/src/components/ButtonGroup.js
+++ b/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;
diff --git a/src/components/Collapse.js b/src/components/Collapse.js
index bb9255754..e70232a0a 100644
--- a/src/components/Collapse.js
+++ b/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;
diff --git a/src/components/DropdownMenu.js b/src/components/DropdownMenu.js
index 28d94dd40..b6342f190 100644
--- a/src/components/DropdownMenu.js
+++ b/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;
diff --git a/src/components/DropdownMenuItem.js b/src/components/DropdownMenuItem.js
index 986b49ab2..a07dd65ba 100644
--- a/src/components/DropdownMenuItem.js
+++ b/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 = {
diff --git a/src/components/Fade.js b/src/components/Fade.js
index d5cfc6b60..93f8fc4bb 100644
--- a/src/components/Fade.js
+++ b/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;
diff --git a/src/components/Jumbotron.js b/src/components/Jumbotron.js
index 091cc99db..df45d7c8a 100644
--- a/src/components/Jumbotron.js
+++ b/src/components/Jumbotron.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Jumbotron as RSJumbotron} from 'reactstrap';
 
 const Jumbotron = props => {
-  const {children, ...otherProps} = props;
-  return <RSJumbotron {...otherProps}>{children}</RSJumbotron>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSJumbotron
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSJumbotron>
+  );
 };
 
 Jumbotron.propTypes = {
@@ -41,7 +50,25 @@ Jumbotron.propTypes = {
   /**
    * HTML tag to use for the Jumbotron. Default: div.
    */
-  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 Jumbotron;
diff --git a/src/components/Label.js b/src/components/Label.js
index 2fc5e7fd7..9c5112cae 100644
--- a/src/components/Label.js
+++ b/src/components/Label.js
@@ -20,6 +20,7 @@ const Label = props => {
     xs,
     className,
     color,
+    loading_state,
     ...otherProps
   } = props;
 
@@ -41,6 +42,9 @@ const Label = props => {
       xs={xs || width}
       className={classes}
       {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
     >
       {children}
     </RSLabel>
@@ -167,7 +171,25 @@ Label.propTypes = {
    * Text color, options: primary, secondary, success, warning, danger, info,
    * muted, light, dark, body, white, black-50, white-50.
    */
-  color: PropTypes.string
+  color: 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
+  })
 };
 
 Label.defaultProps = {
diff --git a/src/components/Popover.js b/src/components/Popover.js
index 9957818bd..5334d9191 100644
--- a/src/components/Popover.js
+++ b/src/components/Popover.js
@@ -3,9 +3,16 @@ import PropTypes from 'prop-types';
 import {Popover as RSPopover} from 'reactstrap';
 
 const Popover = props => {
-  const {children, is_open, hide_arrow, ...otherProps} = props;
+  const {children, is_open, hide_arrow, loading_state, ...otherProps} = props;
   return (
-    <RSPopover isOpen={is_open} hideArrow={hide_arrow} {...otherProps}>
+    <RSPopover
+      isOpen={is_open}
+      hideArrow={hide_arrow}
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
       {children}
     </RSPopover>
   );
@@ -97,7 +104,25 @@ Popover.propTypes = {
   /**
    * Popover offset.
    */
-  offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  offset: PropTypes.oneOfType([PropTypes.string, 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
+  })
 };
 
 export default Popover;
diff --git a/src/components/PopoverBody.js b/src/components/PopoverBody.js
index d722abf16..4249c7c18 100644
--- a/src/components/PopoverBody.js
+++ b/src/components/PopoverBody.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {PopoverBody as RSPopoverBody} from 'reactstrap';
 
 const PopoverBody = props => {
-  const {children, ...otherProps} = props;
-  return <RSPopoverBody {...otherProps}>{children}</RSPopoverBody>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSPopoverBody
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSPopoverBody>
+  );
 };
 
 PopoverBody.propTypes = {
@@ -39,7 +48,25 @@ PopoverBody.propTypes = {
   /**
    * HTML tag to use for the PopoverBody, default: div
    */
-  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 PopoverBody;
diff --git a/src/components/PopoverHeader.js b/src/components/PopoverHeader.js
index 096d3496f..8b9ea00a5 100644
--- a/src/components/PopoverHeader.js
+++ b/src/components/PopoverHeader.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {PopoverHeader as RSPopoverHeader} from 'reactstrap';
 
 const PopoverHeader = props => {
-  const {children, ...otherProps} = props;
-  return <RSPopoverHeader {...otherProps}>{children}</RSPopoverHeader>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSPopoverHeader
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSPopoverHeader>
+  );
 };
 
 PopoverHeader.propTypes = {
@@ -39,7 +48,25 @@ PopoverHeader.propTypes = {
   /**
    * HTML tag to use for the PopoverHeader, default: h3
    */
-  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 PopoverHeader;
diff --git a/src/components/Progress.js b/src/components/Progress.js
index ae0b264a4..15fd04524 100644
--- a/src/components/Progress.js
+++ b/src/components/Progress.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Progress as RSProgress} from 'reactstrap';
 
 const Progress = props => {
-  const {children, ...otherProps} = props;
-  return <RSProgress {...otherProps}>{children}</RSProgress>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSProgress
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSProgress>
+  );
 };
 
 Progress.propTypes = {
@@ -81,7 +90,25 @@ Progress.propTypes = {
   /**
    * CSS classes to apply to the bar.
    */
-  barClassName: PropTypes.string
+  barClassName: 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 Progress;
diff --git a/src/components/Table.js b/src/components/Table.js
index 426da2523..9d05fe34e 100644
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Table as RSTable} from 'reactstrap';
 
 const Table = props => {
-  const {children, ...otherProps} = props;
-  return <RSTable {...otherProps}>{children}</RSTable>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSTable
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSTable>
+  );
 };
 
 Table.propTypes = {
@@ -80,7 +89,25 @@ Table.propTypes = {
    * Set to True or one of the breakpoints 'sm', 'md', 'lg', 'xl' to make table
    * scroll horizontally at lower breakpoints.
    */
-  responsive: PropTypes.oneOf([PropTypes.bool, PropTypes.string])
+  responsive: PropTypes.oneOf([PropTypes.bool, 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 Table;
diff --git a/src/components/Tooltip.js b/src/components/Tooltip.js
index a73d1344f..5a7c412a6 100644
--- a/src/components/Tooltip.js
+++ b/src/components/Tooltip.js
@@ -24,6 +24,7 @@ class Tooltip extends React.Component {
       children,
       hide_arrow,
       boundaries_element,
+      loading_state,
       ...otherProps
     } = this.props;
     return (
@@ -33,6 +34,9 @@ class Tooltip extends React.Component {
         hideArrow={hide_arrow}
         boundariesElement={boundaries_element}
         {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       >
         {children}
       </RSTooltip>
@@ -138,7 +142,25 @@ Tooltip.propTypes = {
   /**
    * Tooltip offset
    */
-  offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  offset: PropTypes.oneOfType([PropTypes.string, 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
+  })
 };
 
 export default Tooltip;
diff --git a/src/components/card/Card.js b/src/components/card/Card.js
index 6df43d1e6..ecf74918e 100644
--- a/src/components/card/Card.js
+++ b/src/components/card/Card.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Card as RSCard} from 'reactstrap';
 
 const Card = props => {
-  const {children, ...otherProps} = props;
-  return <RSCard {...otherProps}>{children}</RSCard>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCard
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCard>
+  );
 };
 
 Card.propTypes = {
@@ -57,7 +66,25 @@ Card.propTypes = {
   /**
    * Invert text colours for use with a darker background.
    */
-  inverse: PropTypes.bool
+  inverse: 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 Card;
diff --git a/src/components/card/CardBody.js b/src/components/card/CardBody.js
index eb6a0944f..6acc67055 100644
--- a/src/components/card/CardBody.js
+++ b/src/components/card/CardBody.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardBody as RSCardBody} from 'reactstrap';
 
 const CardBody = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardBody {...otherProps}>{children}</RSCardBody>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardBody
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardBody>
+  );
 };
 
 CardBody.propTypes = {
@@ -40,7 +49,25 @@ CardBody.propTypes = {
   /**
    * HTML tag to use for the card body, default: div
    */
-  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 CardBody;
diff --git a/src/components/card/CardColumns.js b/src/components/card/CardColumns.js
index 9ea8a242a..084d488ad 100644
--- a/src/components/card/CardColumns.js
+++ b/src/components/card/CardColumns.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardColumns as RSCardColumns} from 'reactstrap';
 
 const CardColumns = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardColumns {...otherProps}>{children}</RSCardColumns>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardColumns
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardColumns>
+  );
 };
 
 CardColumns.propTypes = {
@@ -40,7 +49,25 @@ CardColumns.propTypes = {
   /**
    * HTML tag to use for the card columns container, default: div
    */
-  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 CardColumns;
diff --git a/src/components/card/CardDeck.js b/src/components/card/CardDeck.js
index 5698a03b1..3c97bbe7b 100644
--- a/src/components/card/CardDeck.js
+++ b/src/components/card/CardDeck.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardDeck as RSCardDeck} from 'reactstrap';
 
 const CardDeck = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardDeck {...otherProps}>{children}</RSCardDeck>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardDeck
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardDeck>
+  );
 };
 
 CardDeck.propTypes = {
@@ -40,7 +49,25 @@ CardDeck.propTypes = {
   /**
    * HTML tag to use for the card deck, default: div
    */
-  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 CardDeck;
diff --git a/src/components/card/CardFooter.js b/src/components/card/CardFooter.js
index 9bff2aef1..73fba4abb 100644
--- a/src/components/card/CardFooter.js
+++ b/src/components/card/CardFooter.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardFooter as RSCardFooter} from 'reactstrap';
 
 const CardFooter = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardFooter {...otherProps}>{children}</RSCardFooter>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardFooter
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardFooter>
+  );
 };
 
 CardFooter.propTypes = {
@@ -40,7 +49,25 @@ CardFooter.propTypes = {
   /**
    * HTML tag to use for the card footer, default: div
    */
-  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 CardFooter;
diff --git a/src/components/card/CardGroup.js b/src/components/card/CardGroup.js
index 02b16dfc0..a1fcbe02e 100644
--- a/src/components/card/CardGroup.js
+++ b/src/components/card/CardGroup.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardGroup as RSCardGroup} from 'reactstrap';
 
 const CardGroup = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardGroup {...otherProps}>{children}</RSCardGroup>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardGroup
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardGroup>
+  );
 };
 
 CardGroup.propTypes = {
@@ -40,7 +49,25 @@ CardGroup.propTypes = {
   /**
    * HTML tag to use for the card group, default: div
    */
-  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 CardGroup;
diff --git a/src/components/card/CardHeader.js b/src/components/card/CardHeader.js
index 07043cf38..a1a554d43 100644
--- a/src/components/card/CardHeader.js
+++ b/src/components/card/CardHeader.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardHeader as RSCardHeader} from 'reactstrap';
 
 const CardHeader = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardHeader {...otherProps}>{children}</RSCardHeader>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardHeader
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardHeader>
+  );
 };
 
 CardHeader.propTypes = {
@@ -40,7 +49,25 @@ CardHeader.propTypes = {
   /**
    * HTML tag to use for the card header, default: div
    */
-  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 CardHeader;
diff --git a/src/components/card/CardImg.js b/src/components/card/CardImg.js
index ca541fbe5..b107ff4e0 100644
--- a/src/components/card/CardImg.js
+++ b/src/components/card/CardImg.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardImg as RSCardImg} from 'reactstrap';
 
 const CardImg = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardImg {...otherProps}>{children}</RSCardImg>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardImg
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardImg>
+  );
 };
 
 CardImg.propTypes = {
@@ -68,7 +77,25 @@ CardImg.propTypes = {
   /**
    * Text to be displayed as a tooltip when hovering
    */
-  title: PropTypes.string
+  title: 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 CardImg;
diff --git a/src/components/card/CardImgOverlay.js b/src/components/card/CardImgOverlay.js
index 16664a6f7..3bdfa8844 100644
--- a/src/components/card/CardImgOverlay.js
+++ b/src/components/card/CardImgOverlay.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {CardImgOverlay as RSCardImgOverlay} from 'reactstrap';
 
 const CardImgOverlay = props => {
-  const {children, ...otherProps} = props;
-  return <RSCardImgOverlay {...otherProps}>{children}</RSCardImgOverlay>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSCardImgOverlay
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      {...otherProps}
+    >
+      {children}
+    </RSCardImgOverlay>
+  );
 };
 
 CardImgOverlay.propTypes = {
@@ -40,7 +49,25 @@ CardImgOverlay.propTypes = {
   /**
    * HTML tag to use for the card image overlay, default: div
    */
-  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 CardImgOverlay;
diff --git a/src/components/card/CardLink.js b/src/components/card/CardLink.js
index 069a971d5..a3bffe1fe 100644
--- a/src/components/card/CardLink.js
+++ b/src/components/card/CardLink.js
@@ -5,9 +5,15 @@ import {CardLink as RSCardLink} from 'reactstrap';
 import Link from '../../private/Link';
 
 const CardLink = props => {
-  const {children, ...otherProps} = props;
+  const {children, loading_state, ...otherProps} = props;
   return (
-    <RSCardLink tag={Link} {...otherProps}>
+    <RSCardLink
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      tag={Link}
+      {...otherProps}
+    >
       {children}
     </RSCardLink>
   );
@@ -69,7 +75,25 @@ CardLink.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
+  })
 };
 
 export default CardLink;
diff --git a/src/components/card/CardSubtitle.js b/src/components/card/CardSubtitle.js
index 95c795b64..9fbb788d2 100644
--- a/src/components/card/CardSubtitle.js
+++ b/src/components/card/CardSubtitle.js
@@ -4,10 +4,16 @@ import {CardSubtitle as RSCardSubtitle} from 'reactstrap';
 import classNames from 'classnames';
 
 const CardSubtitle = props => {
-  const {children, className, color, ...otherProps} = props;
+  const {children, loading_state, className, color, ...otherProps} = props;
   const classes = classNames(className, color && `text-${color}`);
   return (
-    <RSCardSubtitle className={classes} {...otherProps}>
+    <RSCardSubtitle
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      className={classes}
+      {...otherProps}
+    >
       {children}
     </RSCardSubtitle>
   );
@@ -52,7 +58,25 @@ CardSubtitle.propTypes = {
    * Text color, options: primary, secondary, success, warning, danger, info,
    * muted, light, dark, body, white, black-50, white-50.
    */
-  color: PropTypes.string
+  color: 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 CardSubtitle;
diff --git a/src/components/card/CardText.js b/src/components/card/CardText.js
index dfad6316b..53c289b8c 100644
--- a/src/components/card/CardText.js
+++ b/src/components/card/CardText.js
@@ -4,10 +4,16 @@ import {CardText as RSCardText} from 'reactstrap';
 import classNames from 'classnames';
 
 const CardText = props => {
-  const {children, className, color, ...otherProps} = props;
+  const {children, loading_state, className, color, ...otherProps} = props;
   const classes = classNames(className, color && `text-${color}`);
   return (
-    <RSCardText className={classes} {...otherProps}>
+    <RSCardText
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      className={classes}
+      {...otherProps}
+    >
       {children}
     </RSCardText>
   );
@@ -52,7 +58,25 @@ CardText.propTypes = {
    * Text color, options: primary, secondary, success, warning, danger, info,
    * muted, light, dark, body, white, black-50, white-50.
    */
-  color: PropTypes.string
+  color: 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 CardText;
diff --git a/src/components/card/CardTitle.js b/src/components/card/CardTitle.js
index 7d1d7c962..9c1d97395 100644
--- a/src/components/card/CardTitle.js
+++ b/src/components/card/CardTitle.js
@@ -4,10 +4,16 @@ import {CardTitle as RSCardTitle} from 'reactstrap';
 import classNames from 'classnames';
 
 const CardTitle = props => {
-  const {children, className, color, ...otherProps} = props;
+  const {children, loading_state, className, color, ...otherProps} = props;
   const classes = classNames(className, color && `text-${color}`);
   return (
-    <RSCardTitle className={classes} {...otherProps}>
+    <RSCardTitle
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+      className={classes}
+      {...otherProps}
+    >
       {children}
     </RSCardTitle>
   );
@@ -52,7 +58,25 @@ CardTitle.propTypes = {
    * Text color, options: primary, secondary, success, warning, danger, info,
    * muted, light, dark, body, white, black-50, white-50.
    */
-  color: PropTypes.string
+  color: 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 CardTitle;
diff --git a/src/components/form/Form.js b/src/components/form/Form.js
index de850ebea..439de1212 100644
--- a/src/components/form/Form.js
+++ b/src/components/form/Form.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Form as RSForm} from 'reactstrap';
 
 const Form = props => {
-  const {children, ...otherProps} = props;
-  return <RSForm {...otherProps}>{children}</RSForm>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSForm
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSForm>
+  );
 };
 
 Form.propTypes = {
@@ -42,7 +51,25 @@ Form.propTypes = {
    * a series of labels, form controls, and buttons on a single horizontal row.
    * Form controls within inline forms vary slightly from their default states.
    */
-  inline: PropTypes.bool
+  inline: 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 Form;
diff --git a/src/components/form/FormFeedback.js b/src/components/form/FormFeedback.js
index a7158515f..710852362 100644
--- a/src/components/form/FormFeedback.js
+++ b/src/components/form/FormFeedback.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {FormFeedback as RSFormFeedback} from 'reactstrap';
 
 const FormFeedback = props => {
-  const {children, ...otherProps} = props;
-  return <RSFormFeedback {...otherProps}>{children}</RSFormFeedback>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSFormFeedback
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSFormFeedback>
+  );
 };
 
 FormFeedback.propTypes = {
@@ -46,7 +55,25 @@ FormFeedback.propTypes = {
   /**
    * Use styled tooltips to display validation feedback.
    */
-  tooltip: PropTypes.bool
+  tooltip: 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 FormFeedback;
diff --git a/src/components/form/FormGroup.js b/src/components/form/FormGroup.js
index bffeccf67..0b7a9769c 100644
--- a/src/components/form/FormGroup.js
+++ b/src/components/form/FormGroup.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {FormGroup as RSFormGroup} from 'reactstrap';
 
 const FormGroup = props => {
-  const {children, ...otherProps} = props;
-  return <RSFormGroup {...otherProps}>{children}</RSFormGroup>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSFormGroup
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSFormGroup>
+  );
 };
 
 FormGroup.propTypes = {
@@ -57,7 +66,25 @@ FormGroup.propTypes = {
    *
    * This prop has no effect if check=False.
    */
-  inline: PropTypes.bool
+  inline: 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 FormGroup;
diff --git a/src/components/form/FormText.js b/src/components/form/FormText.js
index a70068be1..226c6a842 100644
--- a/src/components/form/FormText.js
+++ b/src/components/form/FormText.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {FormText as RSFormText} from 'reactstrap';
 
 const FormText = props => {
-  const {children, ...otherProps} = props;
-  return <RSFormText {...otherProps}>{children}</RSFormText>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSFormText
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSFormText>
+  );
 };
 
 FormText.propTypes = {
@@ -41,7 +50,25 @@ FormText.propTypes = {
    * Text color, options: primary, secondary, success, warning, danger, info,
    * muted, light, dark, body, white, black-50, white-50.
    */
-  color: PropTypes.string
+  color: 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 FormText;
diff --git a/src/components/input/Checkbox.js b/src/components/input/Checkbox.js
index 73181da19..1109b08f0 100644
--- a/src/components/input/Checkbox.js
+++ b/src/components/input/Checkbox.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 
-
 class Checkbox extends React.Component {
   constructor(props) {
     super(props);
@@ -30,6 +29,10 @@ class Checkbox extends React.Component {
             this.setState({checked: !checked});
           }
         }}
+        data-dash-is-loading={
+          (this.props.loading_state && this.props.loading_state.is_loading) ||
+          undefined
+        }
       />
     );
   }
@@ -63,7 +66,25 @@ Checkbox.propTypes = {
   /**
    * Dash-assigned callback that gets fired when the value changes.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * 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 Checkbox;
diff --git a/src/components/input/Checklist.js b/src/components/input/Checklist.js
index 44f30b711..ff1bc7f89 100644
--- a/src/components/input/Checklist.js
+++ b/src/components/input/Checklist.js
@@ -31,12 +31,21 @@ class Checklist extends React.Component {
       setProps,
       style,
       inline,
-      key
+      key,
+      loading_state
     } = this.props;
     const {values} = this.state;
 
     return (
-      <div id={id} style={style} className={className} key={key}>
+      <div
+        id={id}
+        style={style}
+        className={className}
+        key={key}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
+      >
         {options.map(option => (
           <div
             className={classNames('form-check', inline && 'form-check-inline')}
@@ -154,7 +163,25 @@ Checklist.propTypes = {
   /**
    * Arrange Checklist inline
    */
-  inline: PropTypes.bool
+  inline: 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
+  })
 };
 
 Checklist.defaultProps = {
diff --git a/src/components/input/Input.js b/src/components/input/Input.js
index 4f5b823ad..ea8716c12 100644
--- a/src/components/input/Input.js
+++ b/src/components/input/Input.js
@@ -30,7 +30,8 @@ class Input extends React.Component {
       key,
       debounce,
       min,
-      max
+      max,
+      loading_state
     } = this.props;
     const {value} = setProps
       ? debounce
@@ -113,10 +114,14 @@ class Input extends React.Component {
             'valid',
             'invalid',
             'bs_size',
-            'plaintext'
+            'plaintext',
+            'loading_state'
           ],
           this.props
         )}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       />
     );
   }
@@ -250,7 +255,25 @@ Input.propTypes = {
    * focus.  If it's false, it will sent the value back on every
    * change.
    */
-  debounce: PropTypes.bool
+  debounce: 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
+  })
 };
 
 Input.defaultProps = {
diff --git a/src/components/input/InputGroup.js b/src/components/input/InputGroup.js
index bc4c482c8..070fa3c89 100644
--- a/src/components/input/InputGroup.js
+++ b/src/components/input/InputGroup.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {InputGroup as RSInputGroup} from 'reactstrap';
 
 const InputGroup = props => {
-  const {children, ...otherProps} = props;
-  return <RSInputGroup {...otherProps}>{children}</RSInputGroup>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSInputGroup
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSInputGroup>
+  );
 };
 
 InputGroup.propTypes = {
@@ -41,7 +50,25 @@ InputGroup.propTypes = {
    * Set the size of the Input. Options: 'sm' (small), 'md' (medium)
    * or 'lg' (large). Default is 'md'.
    */
-  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 InputGroup;
diff --git a/src/components/input/InputGroupAddon.js b/src/components/input/InputGroupAddon.js
index bf240b049..cc6bc6e81 100644
--- a/src/components/input/InputGroupAddon.js
+++ b/src/components/input/InputGroupAddon.js
@@ -4,12 +4,18 @@ import classNames from 'classnames';
 import InputGroupText from './InputGroupText';
 
 const InputGroupAddon = props => {
-  const {children, className, addon_type, ...otherProps} = props;
+  const {children, loading_state, className, addon_type, ...otherProps} = props;
   const classes = classNames(className, 'input-group-' + addon_type);
 
   if (typeof children === 'string') {
     return (
-      <div className={classes} {...otherProps}>
+      <div
+        className={classes}
+        {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
+      >
         <InputGroupText children={children} />
       </div>
     );
@@ -55,7 +61,25 @@ InputGroupAddon.propTypes = {
   /**
    * Whether to prepend or append the addon. Options: 'prepend', or 'append'.
    */
-  addon_type: PropTypes.oneOf(['prepend', 'append'])
+  addon_type: PropTypes.oneOf(['prepend', 'append']),
+
+  /**
+   * 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 InputGroupAddon;
diff --git a/src/components/input/InputGroupText.js b/src/components/input/InputGroupText.js
index 733cc934e..d98335b78 100644
--- a/src/components/input/InputGroupText.js
+++ b/src/components/input/InputGroupText.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {InputGroupText as RSInputGroupText} from 'reactstrap';
 
 const InputGroupText = props => {
-  const {children, ...otherProps} = props;
-  return <RSInputGroupText {...otherProps}>{children}</RSInputGroupText>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSInputGroupText
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSInputGroupText>
+  );
 };
 
 InputGroupText.propTypes = {
@@ -35,7 +44,25 @@ InputGroupText.propTypes = {
   /**
    * Often used with CSS to style elements with common properties.
    */
-  className: PropTypes.string
+  className: 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 InputGroupText;
diff --git a/src/components/input/RadioButton.js b/src/components/input/RadioButton.js
index 1ac5a7ff4..0ee68af6a 100644
--- a/src/components/input/RadioButton.js
+++ b/src/components/input/RadioButton.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 
-
 class RadioButton extends React.Component {
   constructor(props) {
     super(props);
@@ -20,7 +19,7 @@ class RadioButton extends React.Component {
       <input
         type="radio"
         checked={checked}
-        {...omit(['checked', 'setProps'], this.props)}
+        {...omit(['checked', 'setProps', 'loading_state'], this.props)}
         onClick={() => {
           if (this.props.setProps) {
             this.props.setProps({
@@ -30,6 +29,10 @@ class RadioButton extends React.Component {
             this.setState({checked: !checked});
           }
         }}
+        data-dash-is-loading={
+          (this.props.loading_state && this.props.loading_state.is_loading) ||
+          undefined
+        }
       />
     );
   }
@@ -63,7 +66,25 @@ RadioButton.propTypes = {
   /**
    * Dash-assigned callback that gets fired when the value changes.
    */
-  setProps: PropTypes.func
+  setProps: PropTypes.func,
+
+  /**
+   * 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 RadioButton;
diff --git a/src/components/input/RadioItems.js b/src/components/input/RadioItems.js
index 6c99b89ac..fa573b95b 100644
--- a/src/components/input/RadioItems.js
+++ b/src/components/input/RadioItems.js
@@ -31,12 +31,21 @@ class RadioItems extends React.Component {
       options,
       setProps,
       inline,
-      key
+      key,
+      loading_state
     } = this.props;
     const {value} = this.state;
 
     return (
-      <div id={id} className={className} style={style} key={key}>
+      <div
+        id={id}
+        className={className}
+        style={style}
+        key={key}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
+      >
         {options.map(option => (
           <div
             className={classNames('form-check', inline && 'form-check-inline')}
@@ -148,7 +157,25 @@ RadioItems.propTypes = {
   /**
    * Arrange RadioItems inline
    */
-  inline: PropTypes.bool
+  inline: 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
+  })
 };
 
 RadioItems.defaultProps = {
diff --git a/src/components/input/Textarea.js b/src/components/input/Textarea.js
index 0fb2842f5..1a815de39 100644
--- a/src/components/input/Textarea.js
+++ b/src/components/input/Textarea.js
@@ -19,7 +19,15 @@ class Textarea extends React.Component {
   }
 
   render() {
-    const {setProps, className, invalid, valid, bs_size, debounce} = this.props;
+    const {
+      setProps,
+      className,
+      invalid,
+      valid,
+      bs_size,
+      debounce,
+      loading_state
+    } = this.props;
     const {value} = this.state;
 
     const classes = classNames(
@@ -74,10 +82,14 @@ class Textarea extends React.Component {
             'n_blur_timestamp',
             'n_submit',
             'n_submit_timestamp',
-            'debounce'
+            'debounce',
+            'loading_state'
           ],
           this.props
         )}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       />
     );
   }
@@ -271,7 +283,25 @@ Textarea.propTypes = {
    * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
    * If it's false, it will sent the value back on every change.
    */
-  debounce: PropTypes.bool
+  debounce: 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
+  })
 };
 
 Textarea.defaultProps = {
diff --git a/src/components/layout/Col.js b/src/components/layout/Col.js
index 24e2718fd..ddf9eae61 100644
--- a/src/components/layout/Col.js
+++ b/src/components/layout/Col.js
@@ -10,13 +10,28 @@ const alignMap = {
 };
 
 const Col = props => {
-  const {children, xs, width, align, className, ...otherProps} = props;
+  const {
+    children,
+    xs,
+    width,
+    align,
+    className,
+    loading_state,
+    ...otherProps
+  } = props;
 
   const alignClass = align && alignMap[align];
   const classes = classNames(className, alignClass);
 
   return (
-    <RSCol xs={xs || width} className={classes} {...otherProps}>
+    <RSCol
+      xs={xs || width}
+      className={classes}
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
       {children}
     </RSCol>
   );
@@ -134,7 +149,25 @@ Col.propTypes = {
    * Set vertical alignment of this column's content in the parent row. Options
    * are 'start', 'center', 'end'.
    */
-  align: PropTypes.oneOf(['start', 'center', 'end'])
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * 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 Col;
diff --git a/src/components/layout/Container.js b/src/components/layout/Container.js
index 382ade748..faa89ce59 100644
--- a/src/components/layout/Container.js
+++ b/src/components/layout/Container.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Container as RSContainer} from 'reactstrap';
 
 const Container = props => {
-  const {children, ...otherProps} = props;
-  return <RSContainer {...otherProps}>{children}</RSContainer>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSContainer
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSContainer>
+  );
 };
 
 Container.propTypes = {
@@ -47,7 +56,25 @@ Container.propTypes = {
   /**
    * HTML tag to apply the container class to, default: div
    */
-  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 Container;
diff --git a/src/components/layout/Row.js b/src/components/layout/Row.js
index b1e2a2539..08f69b3e7 100644
--- a/src/components/layout/Row.js
+++ b/src/components/layout/Row.js
@@ -24,6 +24,7 @@ const Row = props => {
     align,
     justify,
     no_gutters,
+    loading_state,
     ...otherProps
   } = props;
 
@@ -32,7 +33,14 @@ const Row = props => {
 
   const classes = classNames(className, alignClass, justifyClass);
   return (
-    <RSRow className={classes} noGutters={no_gutters} {...otherProps}>
+    <RSRow
+      className={classes}
+      noGutters={no_gutters}
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
       {children}
     </RSRow>
   );
@@ -90,7 +98,25 @@ Row.propTypes = {
    * For use in forms. When set to True the `form-row` class is applied, which
    * overrides the default column gutters for a tighter, more compact layout.
    */
-  form: PropTypes.bool
+  form: 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 Row;
diff --git a/src/components/listgroup/ListGroup.js b/src/components/listgroup/ListGroup.js
index d81d6d6ef..24aecdbb7 100644
--- a/src/components/listgroup/ListGroup.js
+++ b/src/components/listgroup/ListGroup.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {ListGroup as RSListGroup} from 'reactstrap';
 
 const ListGroup = props => {
-  const {children, ...otherProps} = props;
-  return <RSListGroup {...otherProps}>{children}</RSListGroup>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSListGroup
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSListGroup>
+  );
 };
 
 ListGroup.propTypes = {
@@ -47,7 +56,25 @@ ListGroup.propTypes = {
    * and rounded corners from the list group in order that they can be rendered
    * edge-to-edge in the parent container (e.g. a Card).
    */
-  flush: PropTypes.bool
+  flush: 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 ListGroup;
diff --git a/src/components/listgroup/ListGroupItem.js b/src/components/listgroup/ListGroupItem.js
index fec9bd095..2fa44a9e3 100644
--- a/src/components/listgroup/ListGroupItem.js
+++ b/src/components/listgroup/ListGroupItem.js
@@ -20,11 +20,17 @@ class ListGroupItem extends React.Component {
   }
 
   render() {
-    let {children, ...otherProps} = this.props;
+    let {children, loading_state, ...otherProps} = this.props;
     const useLink = this.props.href && !this.props.disabled;
     otherProps[useLink ? 'preOnClick' : 'onClick'] = this.incrementClicks;
     return (
-      <RSListGroupItem tag={useLink ? Link : 'li'} {...otherProps}>
+      <RSListGroupItem
+        tag={useLink ? Link : 'li'}
+        {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
+      >
         {children}
       </RSListGroupItem>
     );
@@ -113,7 +119,25 @@ ListGroupItem.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
+  })
 };
 
 export default ListGroupItem;
diff --git a/src/components/listgroup/ListGroupItemHeading.js b/src/components/listgroup/ListGroupItemHeading.js
index d25417cf5..2b6e66800 100644
--- a/src/components/listgroup/ListGroupItemHeading.js
+++ b/src/components/listgroup/ListGroupItemHeading.js
@@ -3,9 +3,16 @@ import PropTypes from 'prop-types';
 import {ListGroupItemHeading as RSListGroupItemHeading} from 'reactstrap';
 
 const ListGroupItemHeading = props => {
-  const {children, ...otherProps} = props;
+  const {children, loading_state, ...otherProps} = props;
   return (
-    <RSListGroupItemHeading {...otherProps}>{children}</RSListGroupItemHeading>
+    <RSListGroupItemHeading
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSListGroupItemHeading>
   );
 };
 
@@ -42,7 +49,25 @@ ListGroupItemHeading.propTypes = {
   /**
    * HTML tag to use for the heading, default: h5
    */
-  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 ListGroupItemHeading;
diff --git a/src/components/listgroup/ListGroupItemText.js b/src/components/listgroup/ListGroupItemText.js
index 76e7a1191..a8b878b24 100644
--- a/src/components/listgroup/ListGroupItemText.js
+++ b/src/components/listgroup/ListGroupItemText.js
@@ -4,10 +4,16 @@ import {ListGroupItemText as RSListGroupItemText} from 'reactstrap';
 import classNames from 'classnames';
 
 const ListGroupItemText = props => {
-  const {children, className, color, ...otherProps} = props;
+  const {children, className, color, loading_state, ...otherProps} = props;
   const classes = classNames(className, color && `text-${color}`);
   return (
-    <RSListGroupItemText className={classes} {...otherProps}>
+    <RSListGroupItemText
+      className={classes}
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
       {children}
     </RSListGroupItemText>
   );
@@ -52,7 +58,25 @@ ListGroupItemText.propTypes = {
    * Text color, options: primary, secondary, success, warning, danger, info,
    * muted, light, dark, body, white, black-50, white-50.
    */
-  color: PropTypes.string
+  color: 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 ListGroupItemText;
diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js
index 5d95705fb..30e091b45 100644
--- a/src/components/nav/Nav.js
+++ b/src/components/nav/Nav.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {Nav as RSNav} from 'reactstrap';
 
 const Nav = props => {
-  const {children, ...otherProps} = props;
-  return <RSNav {...otherProps}>{children}</RSNav>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSNav
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSNav>
+  );
 };
 
 Nav.propTypes = {
@@ -70,14 +79,32 @@ Nav.propTypes = {
    * Specify the horizontal alignment of the NavItems. Options are 'start',
    * 'center', or 'end'.
    */
-  horizontal: PropTypes.oneOf(["start", "center", "end"]),
+  horizontal: PropTypes.oneOf(['start', 'center', 'end']),
 
   /**
    * Set to True if using Nav in Navbar component. This applies the `navbar-nav`
    * class to the Nav which uses more lightweight styles to match the parent
    * Navbar better.
    */
-  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 Nav;
diff --git a/src/components/nav/NavItem.js b/src/components/nav/NavItem.js
index 33333bd5b..2ab93f236 100644
--- a/src/components/nav/NavItem.js
+++ b/src/components/nav/NavItem.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import {NavItem as RSNavItem} from 'reactstrap';
 
 const NavItem = props => {
-  const {children, ...otherProps} = props;
-  return <RSNavItem {...otherProps}>{children}</RSNavItem>;
+  const {children, loading_state, ...otherProps} = props;
+  return (
+    <RSNavItem
+      {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RSNavItem>
+  );
 };
 
 NavItem.propTypes = {
@@ -40,7 +49,25 @@ NavItem.propTypes = {
   /**
    * Apply active style to item.
    */
-  active: PropTypes.bool
+  active: 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 NavItem;
diff --git a/src/components/nav/NavLink.js b/src/components/nav/NavLink.js
index 79315f447..4f9bf04c3 100644
--- a/src/components/nav/NavLink.js
+++ b/src/components/nav/NavLink.js
@@ -20,7 +20,13 @@ class NavLink extends React.Component {
   }
 
   render() {
-    const {children, className, active, ...otherProps} = this.props;
+    const {
+      children,
+      className,
+      active,
+      loading_state,
+      ...otherProps
+    } = this.props;
     const classes = classNames(className, 'nav-link', {
       active,
       disabled: otherProps.disabled
@@ -30,6 +36,9 @@ class NavLink extends React.Component {
         className={classes}
         preOnClick={this.incrementClicks}
         {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       >
         {children}
       </Link>
@@ -110,7 +119,25 @@ NavLink.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
+  })
 };
 
 export default NavLink;
diff --git a/src/components/nav/Navbar.js b/src/components/nav/Navbar.js
index 559d35b61..d39157b56 100644
--- a/src/components/nav/Navbar.js
+++ b/src/components/nav/Navbar.js
@@ -15,7 +15,7 @@ const navbarColors = new Set([
 ]);
 
 const Navbar = props => {
-  const {children, color, style, ...otherProps} = props;
+  const {children, color, style, loading_state, ...otherProps} = props;
   const isNavbarColor = navbarColors.has(color);
 
   return (
@@ -23,6 +23,9 @@ const Navbar = props => {
       color={isNavbarColor && color}
       style={{backgroundColor: !isNavbarColor && color, ...style}}
       {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
     >
       {children}
     </RSNavbar>
@@ -114,7 +117,25 @@ Navbar.propTypes = {
   /**
    * Specify screen size at which to expand the menu bar, e.g. sm, md, lg etc.
    */
-  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  expand: PropTypes.oneOfType([PropTypes.bool, 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 Navbar;
diff --git a/src/components/nav/NavbarBrand.js b/src/components/nav/NavbarBrand.js
index 6225e44f7..9542dac9b 100644
--- a/src/components/nav/NavbarBrand.js
+++ b/src/components/nav/NavbarBrand.js
@@ -4,9 +4,15 @@ import {NavbarBrand as RSNavbarBrand} from 'reactstrap';
 import Link from '../../private/Link';
 
 const NavbarBrand = props => {
-  const {children, ...otherProps} = props;
+  const {children, loading_state, ...otherProps} = props;
   return (
-    <RSNavbarBrand {...otherProps} tag={props.href ? Link : 'span'}>
+    <RSNavbarBrand
+      {...otherProps}
+      tag={props.href ? Link : 'span'}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
       {children}
     </RSNavbarBrand>
   );
@@ -54,7 +60,25 @@ NavbarBrand.propTypes = {
   /**
    * URL of the linked resource
    */
-  href: PropTypes.string
+  href: 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 NavbarBrand;
diff --git a/src/components/nav/NavbarSimple.js b/src/components/nav/NavbarSimple.js
index 8f3abc5b8..4721c39a4 100644
--- a/src/components/nav/NavbarSimple.js
+++ b/src/components/nav/NavbarSimple.js
@@ -46,6 +46,7 @@ class NavbarSimple extends React.Component {
       fluid,
       color,
       style,
+      loading_state,
       ...otherProps
     } = this.props;
     const isNavbarColor = navbarColors.has(color);
@@ -55,6 +56,9 @@ class NavbarSimple extends React.Component {
         color={isNavbarColor && color}
         style={{backgroundColor: !isNavbarColor && color, ...style}}
         {...otherProps}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
       >
         <Container fluid={fluid}>
           {brand && (
@@ -188,7 +192,25 @@ NavbarSimple.propTypes = {
    * 'sm', 'md', 'lg', or 'xl'. Below this breakpoint the navbar will collapse
    * and navitems will be placed in a togglable collapse element.
    */
-  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  expand: PropTypes.oneOfType([PropTypes.bool, 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 NavbarSimple;
diff --git a/src/components/nav/NavbarToggler.js b/src/components/nav/NavbarToggler.js
index 0b668c375..63b87e0ad 100644
--- a/src/components/nav/NavbarToggler.js
+++ b/src/components/nav/NavbarToggler.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {NavbarToggler as RSNavbarToggler} from 'reactstrap';
 
 const NavbarToggler = props => {
-  const {children, ...otherProps} = props;
+  const {children, loading_state, ...otherProps} = props;
   return (
     <RSNavbarToggler
       onClick={() => {
@@ -15,6 +15,9 @@ const NavbarToggler = props => {
         }
       }}
       {...otherProps}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
     >
       {children}
     </RSNavbarToggler>
@@ -71,7 +74,25 @@ NavbarToggler.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
+  })
 };
 
 export default NavbarToggler;
diff --git a/src/components/tabs/Tab.js b/src/components/tabs/Tab.js
index c6db07091..8b398e2ca 100644
--- a/src/components/tabs/Tab.js
+++ b/src/components/tabs/Tab.js
@@ -80,7 +80,25 @@ Tab.propTypes = {
   /**
    * Determines if tab is disabled or not - defaults to false
    */
-  disabled: PropTypes.bool
+  disabled: 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 Tab;
diff --git a/src/components/tabs/Tabs.js b/src/components/tabs/Tabs.js
index b27935777..d74f1af92 100644
--- a/src/components/tabs/Tabs.js
+++ b/src/components/tabs/Tabs.js
@@ -110,17 +110,31 @@ class Tabs extends React.Component {
         label_style,
         tabClassName,
         labelClassName,
+        loading_state,
         ...otherProps
       } = childProps;
       const tabId = tab_id || 'tab-' + idx;
       return (
-        <TabPane tabId={tabId} key={tabId} {...otherProps}>
+        <TabPane
+          tabId={tabId}
+          key={tabId}
+          {...otherProps}
+          data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+          }
+        >
           {child}
         </TabPane>
       );
     });
     return (
-      <div key={this.props.key}>
+      <div
+        key={this.props.key}
+        data-dash-is-loading={
+          (this.props.loading_state && this.props.loading_state.is_loading) ||
+          undefined
+        }
+      >
         <Nav
           id={this.props.id}
           tabs={true}
@@ -175,7 +189,25 @@ Tabs.propTypes = {
   /**
    * Set to True if using tabs inside a CardHeader.
    */
-  card: PropTypes.bool
+  card: 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 Tabs;