Loading the card component until the data comes. Help

Dash Python
1 
query_list = []
for query_name, query_string in analytics_dict.items():
    query_list.append({'query_name': query_name, 'query_string': query_string})

layout = html.Div(children=[])
count = 1
for query in query_list:
    query_name = query['query_name']
    query_string = query['query_string']
    card_id = f"card-{query_name}"
    accordion_id = f"accordion-{query_name}"
    card = dbc.Card(
        [
            dbc.CardBody(id=card_id)
        ]
    )
    accordion = dbc.Accordion(
        id=accordion_id,
        children=[
            dbc.AccordionItem(
                title=str(count) + ". " + query_name,
                children=[card],
                className="custom-accordion-item",
            )
        ],
        start_collapsed=True,
        style={'width': '80%', 'border': '1px solid black', 'align': 'center', 'justify': 'center',
               'margin-left': '10%'},
        flush=True

    )
    layout.children.append(accordion)
    count = count + 1


    @app.callback(Output(card_id, 'children'),
                  [Input(accordion_id, 'active_item')]
                  )
    def update_card(active_item):
        if active_item:
            df = pd.read_sql(query_string, engine)
            table = dash_table.DataTable(
                id=query_name,
                columns=[{"name": i, "id": i} for i in df.columns],
                data=df.to_dict("rows"),
                page_action='native',
                page_current=0,
                page_size=10,
                filter_action="native",
                export_format="csv",
                style_table={'minWidth': '100%', 'overflowX': 'auto'},
                style_header={'backgroundColor': 'black', 'fontWeight': 'bold', 'border': '1px solid green',
                              'font_size': '24px',
                              'color': 'white','text-transform' : 'capitalize'},
                style_cell={'font_size': '16px', 'text_align': 'center'},
            )
            card = dbc.Card(
                [
                    dbc.CardBody(table)
                ]
            )
            return card

This is the code for loading the data inside an accordion when clicked on it.
I want it to have a loader until the data loads .
Can anyone help me with this ?

2

Hi @Lucifer, something like this? I use a dbc.Spinner:

3

I think here u are manually setting the loader time to be 5 seconds. I want to make the loader run until the data loads. I dont really get how I can use the dcc.loading option in my code. If someone can help me with that.

4

Did you try wrapping your dbc.CardBody(id=card_id) with the dbc.Spinner()?

 card = dbc.Card(
    [
        dbc.Spinner(
            id='loading-1',
            type='border',
            color='rgb(181,137,0)',
            spinner_style={'width': '8rem', 'height': '8rem'},
            fullscreen=True,
            fullscreen_style={'backgroundColor': 'rgba(0,0,0,0.4)'},
            # the children ID defines the action for which the spinner is shown
            children=dbc.CardBody(id=card_id)
        )
    ]
)