File tree Expand file tree Collapse file tree 1 file changed +23
-8
lines changed
components/dash-core-components/src/fragments Expand file tree Collapse file tree 1 file changed +23
-8
lines changed Original file line number Diff line number Diff line change @@ -16,6 +16,7 @@ import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
16
16
/* global Plotly:true */
17
17
18
18
import ResizeDetector from '../utils/ResizeDetector' ;
19
+ import LoadingElement from '../utils/LoadingElement' ;
19
20
20
21
/**
21
22
* `autosize: true` causes Plotly.js to conform to the parent element size.
@@ -538,22 +539,36 @@ class PlotlyGraph extends Component {
538
539
const { className, id, loading_state} = this . props ;
539
540
const style = this . getStyle ( ) ;
540
541
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
+ ) ;
547
561
}
548
-
549
562
return (
550
563
< div
551
564
id = { id }
552
565
key = { id }
553
566
className = { className }
554
567
style = { style }
555
568
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
+ }
557
572
>
558
573
< ResizeDetector
559
574
onResize = { this . graphResize }
You can’t perform that action at this time.
0 commit comments