We developed a workaround for this by updating the dash versions but using a custom version of dcc.Loading built from the cookiecutter boilerplate.
I’ve included the javascript for the curious, hopefully something like this can be included in dash_core_components soon.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import GraphSpinner from '../fragments/DashCustomLoading/spinners/GraphSpinner.jsx';
import DefaultSpinner from '../fragments/DashCustomLoading/spinners/DefaultSpinner.jsx';
//import CubeSpinner from '../fragments/DashCustomLoading/spinners/CubeSpinner.jsx'; // npm compilation issues for some reason
import CircleSpinner from '../fragments/DashCustomLoading/spinners/CircleSpinner.jsx';
import DotSpinner from '../fragments/DashCustomLoading/spinners/DotSpinner.jsx';
function getSpinner(spinnerType) {
switch (spinnerType) {
case 'graph':
return GraphSpinner;
case 'circle':
return CircleSpinner;
case 'dot':
return DotSpinner;
default:
return DefaultSpinner;
}
}
/*
case 'cube':
return CubeSpinner;
*/
const hiddenContainer = {visibility: 'hidden', position: 'relative'};
const coveringSpinner = {
visibility: 'visible',
position: 'absolute',
top: '0',
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};
/**
* A DashCustomLoading component that wraps any other component and displays a spinner until the wrapped component has rendered.
*/
export default class DashCustomLoading extends Component {
render() {
const {
loading_state,
color,
className, // Applied to parent div - inconsistent but allows backward compatibility
style, // Applied to the loading state
loadingClassName, // Loading state
parentStyle, // Parent div
fullscreen,
debug,
type: spinnerType,
} = this.props;
const isLoading = loading_state && loading_state.is_loading;
const Spinner = isLoading && getSpinner(spinnerType);
return (
<div className={className} style={isLoading ? hiddenContainer : parentStyle }>
{this.props.children}
<div style={isLoading ? coveringSpinner : {}}>
{isLoading && (
<Spinner
className={loadingClassName}
style={style}
status={loading_state}
color={color}
debug={debug}
fullscreen={fullscreen}
/>
)}
</div>
</div>
);
}
}
DashCustomLoading._dashprivate_isLoadingComponent = true;
DashCustomLoading.defaultProps = {
type: 'default',
color: '#119DFF',
};
DashCustomLoading.propTypes = {
/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
* components in an app.
*/
id: PropTypes.string,
/**
* Array that holds components to render
*/
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
/**
* Property that determines which spinner to show
* one of 'graph', 'cube', 'circle', 'dot', or 'default'.
*/
type: PropTypes.oneOf(['graph', 'cube', 'circle', 'dot', 'default']),
/**
* Boolean that makes the spinner display full-screen
*/
fullscreen: PropTypes.bool,
/**
* If true, the spinner will display the component_name and prop_name
* while loading
*/
debug: PropTypes.bool,
/**
* Additional CSS class for the spinner root DOM node
*/
className: PropTypes.string,
/**
* class name for loading state only, the parent div style can be set using "style".
*/
loadingClassName: PropTypes.string,
/**
* Additional CSS styling for parent div, persisted after loading is complete
*/
parentStyle: PropTypes.object,
/**
* Additional CSS styling for the spinner root DOM node
*/
style: PropTypes.object,
/**
* Primary colour used for the loading spinners
*/
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,
}),
};