Skip to content

Commit a018fc9

Browse files
committed
fix graph
1 parent 74f482c commit a018fc9

File tree

1 file changed

+23
-8
lines changed

1 file changed

+23
-8
lines changed

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
1616
/* global Plotly:true */
1717

1818
import ResizeDetector from '../utils/ResizeDetector';
19+
import LoadingElement from '../utils/LoadingElement';
1920

2021
/**
2122
* `autosize: true` causes Plotly.js to conform to the parent element size.
@@ -538,22 +539,36 @@ class PlotlyGraph extends Component {
538539
const {className, id, loading_state} = this.props;
539540
const style = this.getStyle();
540541

541-
let isLoading;
542-
if (window.dash_component_api !== undefined) {
543-
const ctx = window.dash_component_api.useDashContext();
544-
isLoading = ctx.useLoading();
545-
} else {
546-
isLoading = loading_state && loading_state.is_loading;
542+
if (window.dash_component_api) {
543+
return (
544+
<LoadingElement
545+
id={id}
546+
key={id}
547+
className={className}
548+
style={style}
549+
ref={this.parentElement}
550+
>
551+
<ResizeDetector
552+
onResize={this.graphResize}
553+
targets={[this.parentElement, this.gd]}
554+
/>
555+
<div
556+
ref={this.gd}
557+
style={{height: '100%', width: '100%'}}
558+
/>
559+
</LoadingElement>
560+
);
547561
}
548-
549562
return (
550563
<div
551564
id={id}
552565
key={id}
553566
className={className}
554567
style={style}
555568
ref={this.parentElement}
556-
data-dash-is-loading={isLoading ? true : undefined}
569+
data-dash-is-loading={
570+
(loading_state && loading_state.is_loading) || undefined
571+
}
557572
>
558573
<ResizeDetector
559574
onResize={this.graphResize}

0 commit comments

Comments
 (0)