fix multiple concurrnt loading states

Author: alexcjohnson

dash-renderer/src/observers/loadingMap.ts

@@ -1,7 +1,6 @@
 import {
     equals,
     flatten,
-    forEach,
     isEmpty,
     map,
     reduce
@@ -43,26 +42,22 @@ const observer: IStoreObserverDefinition<IStoreState> = {
         const nextMap: any = isEmpty(loadingPaths) ?
             null :
             reduce(
-                (res, path) => {
+                (res, {id, property, path}) => {
                     let target = res;
-                    const idprop = {
-                        id: path.id,
-                        property: path.property
-                    };
+                    const idprop = {id, property};
 
                     // Assign all affected props for this path and nested paths
                     target.__dashprivate__idprops__ = target.__dashprivate__idprops__ || [];
                     target.__dashprivate__idprops__.push(idprop);
 
-                    forEach(p => {
-                        target = (target[p] =
-                            target[p] ??
-                                p === 'children' ? [] : {}
-                        )
+                    path.forEach((p, i) => {
+                        target = (target[p] = target[p] ??
+                            (p === 'children' && typeof path[i + 1] === 'number' ? [] : {})
+                        );
 
                         target.__dashprivate__idprops__ = target.__dashprivate__idprops__ || [];
                         target.__dashprivate__idprops__.push(idprop);
-                    }, path.path);
+                    });
 
                     // Assign one affected prop for this path
                     target.__dashprivate__idprop__ = target.__dashprivate__idprop__ || idprop;

tests/integration/renderer/test_multi_output.py

@@ -1,4 +1,4 @@
-from multiprocessing import Value
+from multiprocessing import Value, Lock
 
 import dash
 from dash.dependencies import Input, Output
@@ -164,3 +164,64 @@ def test_rdmo005_set_props_behavior(dash_duo):
 
     dash_duo.find_element("#container input").send_keys("hello input w/o ID")
     dash_duo.wait_for_text_to_equal("#container input", "hello input w/o ID")
+
+
+def test_rdmo006_multi_loading_components(dash_duo):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div(
+        children=[
+            html.H3("Edit text input to see loading state"),
+            dcc.Input(id="input-3", value='Input triggers the loading states'),
+            dcc.Loading(className="loading-1", children=[
+                html.Div(id="loading-output-1")
+            ], type="default"),
+            html.Div(
+                [
+                    dcc.Loading(
+                        className="loading-2",
+                        children=[html.Div([html.Div(id="loading-output-2")])],
+                        type="circle",
+                    ),
+                    dcc.Loading(
+                        className="loading-3",
+                        children=dcc.Graph(id='graph'),
+                        type="cube",
+                    )
+                ]
+            ),
+        ],
+    )
+
+    @app.callback(
+        [
+            Output("graph", "figure"),
+            Output("loading-output-1", "children"),
+            Output("loading-output-2", "children"),
+        ],
+        [Input("input-3", "value")])
+    def input_triggers_nested(value):
+        with lock:
+            return dict(data=[dict(y=[1, 4, 2, 3])]), value, value
+
+    def wait_for_all_spinners():
+        dash_duo.find_element('.loading-1 .dash-spinner.dash-default-spinner')
+        dash_duo.find_element('.loading-2 .dash-spinner.dash-sk-circle')
+        dash_duo.find_element('.loading-3 .dash-spinner.dash-cube-container')
+
+    def wait_for_no_spinners():
+        dash_duo.wait_for_no_elements('.dash-spinner')
+
+    with lock:
+        dash_duo.start_server(app)
+        wait_for_all_spinners()
+
+    wait_for_no_spinners()
+
+    with lock:
+        dash_duo.find_element('#input-3').send_keys('X')
+        wait_for_all_spinners()
+
+    wait_for_no_spinners()