[BUG] background callback - progress key not deleted until the end

[Coding-with-Adam]

Community reported bug by Tphil10, as a DM to me. Bug description below:

We’ve [community members, Tim and Bryan] been tinkering around with some cool download animations for buttons but the way we’ve implemented is shines an odd issue with the background callback module.

The below code works great except for the time.sleep(1) line. If you increase this by more than 1 second, the download function downloads the file once a second, every second lol. I wanted to increase it so the checkmark animation stays a bit longer but alas, we can’t cause the file downloads multiple times. Thoughts? I think the problem is with the background callback.

import dash
import dash_mantine_components as dmc
from dash import html, Input, Output, DiskcacheManager, dcc
import diskcache
import time
import plotly.express as px

cache = diskcache.Cache('./cache')
background_callback_manager = DiskcacheManager(cache)

app = dash.Dash(
    __name__,
    suppress_callback_exceptions=True,
    background_callback_manager=background_callback_manager,
    external_stylesheets=['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css']
)

download = html.I(className='fas fa-download fa-fw fa-2x')
loading = html.I(className='fas fa-spinner fa-fw fa-2x fa-spin')
complete = html.I(className='fas fa-check fa-fw fa-2x')


download_btn = dmc.ActionIcon(
        download,
        id='dload-btn',
        variant='filled',
        size='xl',
        p='1.5rem',
        style={'transition': 'all 0.5s ease-in-out'},
        color='blue',
    )

app.layout = html.Div(id='container', 
children=[
    download_btn,
    dcc.Download(id='download')
])


@app.callback(
    Output('dload-btn', 'n_clicks'),
    Input('dload-btn', 'n_clicks'),
    prevent_initial_call=True,
    background=True,
    running=[
         (Output('dload-btn', 'disabled'), True, False),
         (Output('dload-btn','children'), loading, download),
         (Output('dload-btn','className'), None, None)
    ],
    progress=[Output('dload-btn','children'),
              Output('dload-btn','className'),
              Output('download','data')],
)
def downloader(set_progress, _):

    time.sleep(3)

    df = px.data.gapminder()
    set_progress([complete, 'success', dcc.send_data_frame(df.to_csv, "mydf.csv")])
    time.sleep(1)

    return dash.no_update


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

style.css file:

.success {
    border-radius: 50%;
    color: #fff !important;
    background-color: #80bca3 !important;
}

Plotly staff member, Philippe, looked into this problem. The ostensible culprit is:

I've found the reason why it does it twice, we just never delete the progress key until the end, for most case it doesn't matter, but with the download it triggers it everytime it's updated.