Function with Loading Callback still Returning Regularly

Dash Python
8

@matt-buckley,

Here, try this:

import time
import dash
from dash import html, dcc
from dash.long_callback import DiskcacheLongCallbackManager
from dash.dependencies import Input, Output

## Diskcache
import diskcache
cache = diskcache.Cache("./cache")
long_callback_manager = DiskcacheLongCallbackManager(cache)

app = dash.Dash(__name__, long_callback_manager=long_callback_manager)

app.layout = html.Div(
    [dcc.Loading(id="progress_spinner"),
        html.Div(
            [
                html.P(id="paragraph_id", children=["Button not clicked"]),
                html.Div(id="progress_bar", style={"display": "none"},),
            ]
        ),
        html.Button(id="button_id", children="Run Job!"),
        html.Button(id="cancel_button_id", children="Cancel Running Job!"),
    ]
)

@app.long_callback(
    output=[Output("paragraph_id", "children"),
    Output("progress_spinner", "children")],
    inputs=Input("button_id", "n_clicks"),
    running=[
        (Output("button_id", "disabled"), True, False),
        (Output("cancel_button_id", "disabled"), False, True),
        (
                Output("paragraph_id", "style"),
                {"visibility": "hidden"},
                {"visibility": "visible"},
        ),
        (
                Output("progress_bar", "style"),
                {"display": "block"},
                {"display": "none"},
        ),
    ],
    cancel=[Input("cancel_button_id", "n_clicks")],
    progress=[Output("progress_bar", "children")],
    prevent_initial_call=True
)
def callback(set_progress, n_clicks):
    total = 10
    set_progress('Loading Data')
    for i in range(total):
        time.sleep(0.5)
    set_progress('Successfully Loaded Data, performing additional crunching')
    time.sleep(5)
    return [f"Clicked {n_clicks} times", '']


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

It uses the progress to update what has happened behind the scenes. This is just rudimentary, but it should give you some idea of how you could possibly solve your issue.

edit#2 added the use of a load in order to add some movement.