CODEWITHSUNDEEP
javascriptpythonflask
Jaquacky
Jaquacky

Reputation: 561

Show animation on page while long process is running on server

I want to implement an animation on my page when a long process, such as the Python Flask route below, is running that disappears after it finishes. How can I do this?

@app.route('/test', methods=['GET','POST'])
def test():
    if request.method=="POST":
        if request.form.get('updatepaths')=='Update' and form.validate_on_submit():
            Fname = form.name.data
            Lname=form.name2.data
            TimeConsumingFunction(Fname)
            TimeConsumingFunction(Lname)

Upvotes: 1

Views: 1147

Answers (1)

davidism
davidism

Reputation: 127260

You'll need to use JavaScript to make the request, display a spinner, then remove the spinner once the request completes. For example, using jQuery, this example shows "waiting" (or whatever animation you put there) while the request is processing.

<a href="{{ url_for('test') }}" id="run">Run</a>
<span id="wait">Waiting</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var run_link = $('a#run');
    var run_wait = $('span#wait');
    run_wait.hide();

    $('a#run').click(function(event) {
        event.preventDefault();

        run_link.hide()
        run_wait.show();

        $.post($(this).attr('href'), function(data) {
            run_wait.hide()
            run_link.show();
        });
    });
</script>

You can also use a task queue such as Celery to run tasks in the backround, rather than waiting for the request to finish. This is beneficial because the task can continue running longer than the timeout for a request.

Upvotes: 6

Related Questions