Using dcc.Loading spinner with target_components and an allow_duplicate=True output

Dash Python
1

Hi there,

I am looking to use the target_components dictionary of a dcc.Loading component to specify exactly at which prop update the spinner should trigger.
I do get it working as long as the component to be updated is a standard Output to a callback. Once I do try to specify the exact same prop for an Output, which is allow multiple callbacks to write to the target_components dict does address the correct prop anymore. Upon using debug=True I found, that, Dash adds a hash string to the property of any component upon specifying allow_duplicate=True and hence, the Loading component only trigger when using ‘*’ in the target_components dict.

Now my questions are as follows:

  1. Is this observation correct?
  2. Is there any way to get the target_components dict to work with allow_duplicate=True?
  3. Is there another way to only trigger the Loading spinner for certain update events?
  4. If I am mistaken, is there anything else I should check?

Find my minimal example below. Without allow_duplicates=True the behaviour is as expected and with the spinner does not seem to be rendered.

Best

Robert

–

from time import sleep

from dash import Dash, html, Input, Output
from dash.dcc import Loading
from dash_bootstrap_components import Input as dbcInput

# Initialise the Dash app
app = Dash(__name__)

id_str = 'text-input'

# Define the layout of the app
app.layout = html.Div(children=html.Table(children=[
    html.Tr(children=html.Td(children=Loading(
            id='text-input-spinner',
            debug=True,
            target_components={id_str: 'value'},
            type='default',
            children=html.Div(children=dbcInput(
                    size='sm',
                    id=id_str,
                    type='text')
            )))),
    html.Tr(children=html.Td(html.Button(children='Click Me',
                                         id='example-button'))),
    html.Tr(children=html.Td(html.Label(children='Dummy',
                                        id='le-label')))]))

# Define the callback to update the loading output
@app.callback(output=[Output(id_str, 'value', allow_duplicate=True),
                      Output('le-label', 'children')],
              inputs=[Input('example-button', 'n_clicks')],
              prevent_initial_call=True)
def update_output(_: int):
    sleep(2)
    return 'dummy_value', 'Check'

# Run the app
if __name__ == '__main__':
    app.run(debug=True)
2

Hello @Robster,

What version of Dash are you using?

3

Hey @jinnyzor,

so far I have tried 2.18.2 and 3.0.3.

Also I have added a minimal code example, which I forgot to append in the initial post. Sry.

4

Your example breaks initially because of debug=True in the spinner. @AnnMarieW

Yes, I can see the loading in there, the useLoading needs to be updated to split at the @ since this, I’m assuming, cannot exist in a prop name. :slight_smile:

Go ahead and make an issue on GitHub.

5

Thank you so much and done!

6

Looks like this should be fixed in the next release. :slight_smile: