How to show a spinner while downloading a file?

[lopezco]

Hello, I currently trying to download a file after an anchor is clicked. I've followed the recommendations here https://community.plot.ly/t/allowing-users-to-download-csv-on-click/5550/36 and I've managed to successfully dowload the file. However, the file generation process is a bit long and I would like to show a spinner (loading state) after the anchor is clicked.

Here is a running sample of my code. The generate_data is there to simulate a "long" process of data creation (5 seconds).

import logging
import pandas as pd
from io import BytesIO
from urllib.parse import quote
from datetime import datetime
from flask import send_file, request

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input

# Init application
app = dash.Dash('my-app')
app.config.suppress_callback_exceptions = True
app.logger.setLevel(logging.INFO)
server = app.server
app.layout = html.Div(className='row input-group mb-3', children=[
    html.Div(className='input-group-prepend',
        children=[html.Span("Query", className="input-group-text")]),
    dcc.Input(placeholder=' What do you want to search?', id="query-input", size=103,
        type='text', value='', debounce=False),
    html.Div(className='input-group-append', id='dynamic-search-button-div',
        children=[html.Button('Search', id='main-button', className='btn btn-primary')]),
]),


def generate_data(query=''):
    import time
    time.sleep(5)
    return pd.DataFrame({'A': [46, 43641, 31, 3464, 5]})


@app.server.route('/get_data', methods=['GET'])
def get_data():
    main_query = request.args['query']
    data = generate_data(query=main_query)
    output = BytesIO()
    writer = pd.ExcelWriter(output, engine='xlsxwriter')
    data.to_excel(writer, sheet_name='Sheet1', index=False)
    writer.save()
    output.seek(0)
    return send_file(output, as_attachment=True)


@app.callback(Output('dynamic-search-button-div', 'children'), [Input('query-input', 'value')])
def update_output(query):
    if query == '':
        raise dash.exceptions.PreventUpdate()
    params = {'query': quote(query)}
    output_children = html.A(
        id='download-link', target="_blank",
        download="{}_data.xlsx".format(format(datetime.now(), '%Y%m%d-%H%M%S')),
        href="/get_data{}".format('?' + params),
        children=[html.Button('Search', className='btn btn-primary')]
    )
    return output_children


if __name__ == "__main__":
    app.run_server(host='0.0.0.0', debug=False)

Where should I put a dcc.Loding component in my layout? and how should I use it?

Let me know if any other details are needed. Thanks!

[byronz]

@lopezco thanks for posting your question in the issues, but you will get more chance to get the answer from our wonderful community here, you can of course keep this issue open before you find out the solution. thanks

[weeeyan]

Haven't really found the best way to do this but maybe this would help: https://community.plot.ly/t/adopting-a-react-components-for-dash/4961

[milliewoo]

Hello ... I am hitting the same problem ... just wonder if there is any easier way to make a spinner when downloading file in dash?

[lopezco]

I was able to solve this with the Download component of dash-extensions package.

Link: https://www.dash-extensions.com/pages/components/download