[BUG] dcc.Loading with children showing loading animation even when none of its children are updating

[tlauli]

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash                                     3.0.3
dash_ag_grid                             31.3.1
dash_auth                                2.3.0
dash-bootstrap-components                2.0.1

• if frontend related, tell us your Browser, Version and OS

  • OS: iOS
  • Browser chrome
  • Version 135.0.7049.85 (Official Build) (arm64)

Describe the bug

dcc.Loading with children is showing loading animation even though none of its children are updating

Expected behavior

the loading animation is shown if and only if any of its children are updating

MWE
In this mwe, the dcc.Loading shows its loading animation while the callback is running. Note that if the first "A" in layout is omitted, the loading animation is not shown.

from time import sleep

import dash_bootstrap_components as dbc
from dash import Dash, Input, Output, callback, dcc, html

layout = [
    "A",
    dcc.Loading(["A"]),
    "B",
    html.Div(),
    "C",
    html.Div(),
    html.Div(),
    "Date picker",
    dcc.DatePickerRange(),
    dbc.Tooltip(),
    html.Div(id={"app_name": "test", "component": "last-update-div"}),
    dcc.Interval(
        id={"app_name": "test", "component": "interval-refresh"},
        interval=1 * 1000,
    ),
]


@callback(
    Output({"app_name": "test", "component": "last-update-div"}, "children", allow_duplicate=True),
    Input({"app_name": "test", "component": "interval-refresh"}, "n_intervals"),
    prevent_initial_call=True,
)
def load_data(_):
    sleep(0.3)
    return "x"


app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = layout
app.run()

[T4rk1n]

This is a strange bug, minimizing the app more, this behavior start when there is 12 or more elements at the same level as the loading:

from time import sleep

from dash import Dash, Input, Output, callback, dcc, html

layout = [
    "A",
    dcc.Loading(["B"]),
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    html.Div(id="output"),
    html.Button("btn", id="btn")
]

@callback(
    Output("output", "children"),
    Input("btn", "n_clicks"),
    prevent_initial_call=True,
)
def load_data(_):
    sleep(3)
    return "x"


app = Dash(__name__)
app.layout = layout

if __name__ == "__main__":
    app.run(debug=True)

[T4rk1n]

The selector matches [1 so [11 will match.