dmc.Button in loading state without background callbacks?

[dansah]

Hi, I’m using the dash mantine components very frequently lately and I’m loving it.

I’ve noticed that the buttons has a loading param which can very elegantly display a spinner replacing the icon.
How do I activate that loading state throughout the duration of my callback if I do not want to use background callbacks?

Is there any neat tricks I can use?
I’ve checked the dcc.loading documentation as well, but I’m not sure if I can stitch it together with that…

Thanks in advance,
Daniel

[AIMPED]

Hey @dansah, interesting question!

Since dash allows duplicate outputs from version 2.9.0, you could do something like that:

import time

import dash
import dash_mantine_components as dmc
from dash import Input, Output, html, dcc
from dash_iconify import DashIconify

app = dash.Dash(
    __name__,
)

app.layout = html.Div([
    dmc.Button(
        "Connect to Database",
        id='btn',
        leftIcon=[DashIconify(icon="fluent:database-plug-connected-20-filled")],
    ),
    dcc.Store(id='store')
])


@app.callback(
    Output('btn', 'leftIcon', allow_duplicate=True),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def update(_):
    return dcc.Loading()


@app.callback(
    Output('store', 'data'),
    Output('btn', 'leftIcon'),
    Input('btn', 'leftIcon'),
    prevent_initial_call=True
)
def update(_):
    time.sleep(3)
    return {}, [DashIconify(icon="fluent:database-plug-connected-20-filled")]


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

mred dupout

[dansah]

Thanks @AIMPED - that is a clever use of the duplicate outputs!

I’ve tweaked your example a bit and are hitting the loading state of the button instead of changing the icon, the effect is the same just plain dmc instead of injecting the dcc.Loading component in there.

Thanks a ton!
Daniel

[snehilvj]

Added a dedicated section here: https://www.dash-mantine-components.com/components/button

[RenaudLN]

FYI you probably want to make the first callback (the one that just changes the loading attribute) a clientside one to ensure that it runs before the other. When I tried on the DMC website the order got reversed and the button got stuck in loading state after having retrieved the ‘results’.

[snehilvj]

yeah, corrected that. Thanks!