Merge pull request #3496 from plotly/cam/1263/fix-infinite-resize-loop

fix: Fix dcc.Graph infinite resize loop

Author: camdecoster

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3415](https://github.com/plotly/dash/pull/3415) Fix the error triggered when only a single no_update is returned for client-side callback functions with multiple Outputs. Fix [#3366](https://github.com/plotly/dash/issues/3366)
 - [#3416](https://github.com/plotly/dash/issues/3416) Fix DeprecationWarning in dash/_jupyter.py by migrating from deprecated ipykernel.comm.Comm to comm module
 - [#3488](https://github.com/plotly/dash/pull/3488) Fix pkgutil.find_loader removal in Python 3.14
+- [#3496](https://github.com/plotly/dash/pull/3496) Fix dcc.Graph infinite resize loop
 
 ## Deprecated
 - [#3482](https://github.com/plotly/dash/pull/3482) Deprecate dash_table.DataTable with replacement from `dash[ag-grid]` extra requirement.

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

@@ -393,6 +393,7 @@ class PlotlyGraph extends Component {
 
         gd.classList.add('dash-graph--pending');
 
+        // Calling resize enables layout.autosize in plotly.js
         Plotly.Plots.resize(gd)
             .catch(() => {})
             .finally(() => gd.classList.remove('dash-graph--pending'));
@@ -457,27 +458,6 @@ class PlotlyGraph extends Component {
         });
     }
 
-    getStyle() {
-        const {responsive} = this.props;
-        let {style} = this.props;
-
-        // When there is no forced responsive style, return the original style property
-        if (!responsive) {
-            return style;
-        }
-
-        // Otherwise, if the height is not set, we make the graph size equal to the parent one
-        if (!style) {
-            style = {};
-        }
-
-        if (!style.height) {
-            return Object.assign({height: '100%'}, style);
-        }
-
-        return style;
-    }
-
     componentDidMount() {
         const p = this.plot(this.props);
         this._queue = this.amendTraces(p, {}, this.props);
@@ -536,46 +516,33 @@ class PlotlyGraph extends Component {
     }
 
     render() {
-        const {className, id, loading_state} = this.props;
-        const style = this.getStyle();
-
-        if (window.dash_component_api) {
-            return (
-                <LoadingElement
-                    id={id}
-                    key={id}
-                    className={className}
-                    style={style}
-                    ref={this.parentElement}
-                >
-                    <ResizeDetector
-                        onResize={this.graphResize}
-                        targets={[this.parentElement, this.gd]}
-                    />
-                    <div
-                        ref={this.gd}
-                        style={{height: '100%', width: '100%'}}
-                    />
-                </LoadingElement>
-            );
+        const {className, id, loading_state, style = {}} = this.props;
+        if (this.isResponsive(this.props)) {
+            style.height ||= '100%';
         }
+
+        let Container = LoadingElement;
+        const containerProps = {
+            className,
+            id,
+            key: id,
+            ref: this.parentElement,
+            style,
+        };
+        if (!window.dash_component_api) {
+            Container = 'div';
+            containerProps['data-dash-is-loading'] =
+                loading_state?.is_loading || undefined;
+        }
+
         return (
-            <div
-                id={id}
-                key={id}
-                className={className}
-                style={style}
-                ref={this.parentElement}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-            >
+            <Container {...containerProps}>
                 <ResizeDetector
                     onResize={this.graphResize}
                     targets={[this.parentElement, this.gd]}
                 />
                 <div ref={this.gd} style={{height: '100%', width: '100%'}} />
-            </div>
+            </Container>
         );
     }
 }