[BUG] Loading disappears too soon when callback updating its content is triggered multiple times

[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.2.0
dash_ag_grid                     31.3.1
dash_auth                        2.3.0
dash-bootstrap-components        2.0.4
dash-bootstrap-templates         2.1.0
dash-extensions                  2.0.4
dash-iconify                     0.1.2

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

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

Describe the bug

I have a callback that updates a component inside a dcc.Loading. When this callback is triggered multiple times, the loading overlay disappears after any of them finishes, but data is updated only after the last one finishes.

This is quite problematic, as if a callback has multiple inputs, and user changes more than one in a quick succession, the loading overlay disappears before the data is updated, providing misleading information.
Expected behavior

Loading overlay disappears only after the last callback finishes and data is updated.

MWE
Click the button, wait a second or two, and click it again. Loading overlay disappears 3 seconds after the first button click, data appears 3 seconds after the second button click.

from time import sleep

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

layout = [
    html.Button("Button", id="button"),
    dcc.Loading(html.Div(id="target")),
]


@callback(
    Output("target", "children"),
    Input("button", "n_clicks"),
    prevent_initial_call=True,
)
def x(b):
    sleep(3)
    return b


app = Dash(__name__)
app.layout = layout
app.run()