Add LoadingDiv

Author: T4rk1n

components/dash-core-components/src/fragments/Graph.react.js

@@ -14,6 +14,7 @@ import {
 } from 'ramda';
 import PropTypes from 'prop-types';
 import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
+import LoadingDiv from '../utils/LoadingDiv';
 /* global Plotly:true */
 
 /**
@@ -514,18 +515,10 @@ class PlotlyGraph extends Component {
     }
 
     render() {
-        const {className, id, style, loading_state} = this.props;
+        const {className, id, style} = this.props;
 
         return (
-            <div
-                id={id}
-                key={id}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-                className={className}
-                style={style}
-            >
+            <LoadingDiv id={id} key={id} className={className} style={style}>
                 <ResizeDetector
                     handleHeight={true}
                     handleWidth={true}
@@ -535,7 +528,7 @@ class PlotlyGraph extends Component {
                     onResize={this.graphResize}
                 />
                 <div ref={this.gd} style={{height: '100%', width: '100%'}} />
-            </div>
+            </LoadingDiv>
         );
     }
 }

components/dash-core-components/src/utils/LoadingDiv.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function LoadingDiv({children, ...props}) {
+    const ctx = window.dash_component_api.useDashContext();
+    const loading = ctx.useLoading();
+    return (
+        <div {...props} data-dash-is-loading={loading || undefined}>
+            {children}
+        </div>
+    );
+}
+
+LoadingDiv.propTypes = {
+    children: PropTypes.node,
+};

dash/dash-renderer/src/wrapper/DashContext.tsx

@@ -42,7 +42,10 @@ export function DashContextProvider(props: DashContextProviderProps) {
     }, [stringPath]);
 
     const useLoading = useCallback(() => {
-        return useSelector(state => !!pathOr(false, [stringPath], state));
+        return useSelector((state: any) => {
+            const load = pathOr([], [stringPath], state.loading);
+            return load.length > 0;
+        });
     }, [stringPath]);
 
     const ctxValue = useMemo(() => {