Multiple loading bars appear instead on one

Dash Python
1

Hi all,

I am trying to create a dashboard where user inputs somethin, like a continent name and the list of countries is shown as a selectable table. When they select a country the major cities of it are shows as another table.
I am using long callbacks and have the issue of multiple leading bars appearing when only one is needed.

For example, when the user inputs one loading bar should appear indicating a table (of countries) is being generated. However, multiple (also for the list of major cities and one table below) are seen. Do you know how to fix it?

This problem didn’t exist when ‘normal’ callbacks were used, but there was a worse problem because of which I switched to long callbacks.

image

2

Hi @subodhpokhrel7, sharing the corresponding piece of code will help the community answer your question.
Is it possible that multiple your dcc.Loading component contains more than one children? Perhaps three children?

1 Like
3

Hi @jhupiterz ,

I was able to fix the issue by id-ing the loading bars and adding a running component to the callbacks.

dcc.Loading(id="loader1",
                children=[
                    html.Div(
                        html.Div(id="output"), style={"height": "100%"}
                    )
                ],
                type="default",
                color="black",
            ),

#Later:

@callback(
    Output("usn_output", "children"),
    Input("submit_id", "n_clicks"),
    State("labman_id", "value"),
    running=[
        (Output("loader1", "style"), dict(), dict(display="none"),),
    ],
)

Although multiple bars are not seen, the one bar that is present coexists with the component that is displayed for a few seconds before disappearing- which again makes the program look not clean.