Ensure that components are still in the DOM when they are loading.

tests/integration/loading/test_loading_component.py

@@ -227,20 +227,28 @@ def test_ldcp006_children_identity(dash_dcc):
     lock = Lock()
 
     app = dash.Dash(__name__)
-    app.layout = html.Div([
-        html.Button("click", id="btn"),
-        dcc.Loading(dcc.Graph(id="graph"), className="loading")
-    ])
+    app.layout = html.Div(
+        [
+            html.Button("click", id="btn"),
+            dcc.Loading(dcc.Graph(id="graph"), className="loading"),
+        ]
+    )
 
     @app.callback(Output("graph", "figure"), [Input("btn", "n_clicks")])
     def update_graph(n):
         with lock:
             bars = list(range(2, (n or 0) + 5))
             return {
                 "data": [{"type": "bar", "x": bars, "y": bars}],
-                "layout": {"width": 400, "height": 400}
+                "layout": {"width": 400, "height": 400},
             }
 
+    def get_graph_visibility():
+        return dash_dcc.driver.execute_script(
+            "var gd_ = document.querySelector('.js-plotly-plot');"
+            "return getComputedStyle(gd_).visibility;"
+        )
+
     with lock:
         dash_dcc.start_server(app)
         dash_dcc.find_element(".loading .dash-spinner")
@@ -249,20 +257,24 @@ def update_graph(n):
             "window.gd = document.querySelector('.js-plotly-plot');"
             "window.gd.__test__ = 'boo';"
         )
+        assert get_graph_visibility() == "hidden"
 
     test_identity = (
         "var gd_ = document.querySelector('.js-plotly-plot');"
         "return gd_ === window.gd && gd_.__test__ === 'boo';"
     )
 
-    assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 3
+    assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 3
     assert dash_dcc.driver.execute_script(test_identity)
+    assert get_graph_visibility() == "visible"
 
     with lock:
         dash_dcc.find_element("#btn").click()
         dash_dcc.find_element(".loading .dash-spinner")
-        assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 3
+        assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 3
         assert dash_dcc.driver.execute_script(test_identity)
+        assert get_graph_visibility() == "hidden"
 
-    assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 4
+    assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 4
     assert dash_dcc.driver.execute_script(test_identity)
+    assert get_graph_visibility() == "visible"