From 74f482c152ca450958297e5a946d70f7701c28d4 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 29 Jul 2025 11:05:29 -0400
Subject: [PATCH 1/3] Fix dcc.Graph backward compatibility with dash 2.0

---
 .../src/fragments/Graph.react.js                | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js
index 7039bf1035..0abf204390 100644
--- a/components/dash-core-components/src/fragments/Graph.react.js
+++ b/components/dash-core-components/src/fragments/Graph.react.js
@@ -13,8 +13,6 @@ import {
 import PropTypes from 'prop-types';
 import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
 
-import LoadingElement from '../utils/LoadingElement';
-
 /* global Plotly:true */
 
 import ResizeDetector from '../utils/ResizeDetector';
@@ -537,23 +535,32 @@ class PlotlyGraph extends Component {
     }
 
     render() {
-        const {className, id} = this.props;
+        const {className, id, loading_state} = this.props;
         const style = this.getStyle();
 
+        let isLoading;
+        if (window.dash_component_api !== undefined) {
+            const ctx = window.dash_component_api.useDashContext();
+            isLoading = ctx.useLoading();
+        } else {
+            isLoading = loading_state && loading_state.is_loading;
+        }
+
         return (
-            <LoadingElement
+            <div
                 id={id}
                 key={id}
                 className={className}
                 style={style}
                 ref={this.parentElement}
+                data-dash-is-loading={isLoading ? true : undefined}
             >
                 <ResizeDetector
                     onResize={this.graphResize}
                     targets={[this.parentElement, this.gd]}
                 />
                 <div ref={this.gd} style={{height: '100%', width: '100%'}} />
-            </LoadingElement>
+            </div>
         );
     }
 }

From a018fc9667ce3223abaf4caa270c772c9bc0432d Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 29 Jul 2025 13:10:52 -0400
Subject: [PATCH 2/3] fix graph

---
 .../src/fragments/Graph.react.js              | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js
index 0abf204390..c33feebf6f 100644
--- a/components/dash-core-components/src/fragments/Graph.react.js
+++ b/components/dash-core-components/src/fragments/Graph.react.js
@@ -16,6 +16,7 @@ import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
 /* global Plotly:true */
 
 import ResizeDetector from '../utils/ResizeDetector';
+import LoadingElement from '../utils/LoadingElement';
 
 /**
  * `autosize: true` causes Plotly.js to conform to the parent element size.
@@ -538,14 +539,26 @@ class PlotlyGraph extends Component {
         const {className, id, loading_state} = this.props;
         const style = this.getStyle();
 
-        let isLoading;
-        if (window.dash_component_api !== undefined) {
-            const ctx = window.dash_component_api.useDashContext();
-            isLoading = ctx.useLoading();
-        } else {
-            isLoading = loading_state && loading_state.is_loading;
+        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>
+            );
         }
-
         return (
             <div
                 id={id}
@@ -553,7 +566,9 @@ class PlotlyGraph extends Component {
                 className={className}
                 style={style}
                 ref={this.parentElement}
-                data-dash-is-loading={isLoading ? true : undefined}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
             >
                 <ResizeDetector
                     onResize={this.graphResize}

From 953fc54d441c952ade5c316628af6899d914af57 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Wed, 30 Jul 2025 08:30:59 -0400
Subject: [PATCH 3/3] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b123ad5869..bf400201bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## Fixed
 - [#3353](https://github.com/plotly/dash/pull/3353) Support pattern-matching/dict ids in `dcc.Loading` `target_components`
 - [#3371](https://github.com/plotly/dash/pull/3371) Fix allow_optional triggering a warning for not found input.
+- [#3379](https://github.com/plotly/dash/pull/3379) Fix dcc.Graph backward compatibility with dash 2.0 for ddk.Graph
 
 # [3.1.1] - 2025-06-29