Merge pull request #2888 from leeagustin/dcc-Loading-id-DOM

Adds id to dcc.Loading DOM
plotly · Jun 18, 2024 · 66d564e · 66d564e
2 parents 71b1e6f + ca5d66a
commit 66d564e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/components/dash-core-components/src/components/Loading.react.js b/components/dash-core-components/src/components/Loading.react.js
@@ -24,6 +24,7 @@ const Loading = ({
     loading_state,
     display,
     color,
+    id,
     className,
     style,
     parent_className,
@@ -144,7 +145,7 @@ const Loading = ({
             >
                 {children}
             </div>
-            <div style={showSpinner ? coveringSpinner : {}}>
+            <div id={id} style={showSpinner ? coveringSpinner : {}}>
                 {showSpinner &&
                     (custom_spinner || (
                         <Spinner

diff --git a/components/dash-core-components/tests/integration/loading/test_loading_component.py b/components/dash-core-components/tests/integration/loading/test_loading_component.py
@@ -10,7 +10,8 @@ def test_ldcp001_loading_component_initialization(dash_dcc):
     app = Dash(__name__)
 
     app.layout = html.Div(
-        [dcc.Loading([html.Div(id="div-1")], className="loading")], id="root"
+        [dcc.Loading([html.Div(id="div-1")], id="loading", className="loading")],
+        id="root",
     )
 
     @app.callback(Output("div-1", "children"), [Input("root", "n_clicks")])
@@ -20,7 +21,7 @@ def updateDiv(children):
 
     with lock:
         dash_dcc.start_server(app)
-        dash_dcc.find_element(".loading .dash-spinner")
+        dash_dcc.find_element("#loading .loading .dash-spinner")
         # ensure inner component is also mounted
         dash_dcc.wait_for_text_to_equal("#div-1", "")