How to prevent freezing in Flask web app during computations and redirect upon completion? (Python)

I am coding a Flask web app in Python 3.11 and I want to make the following possible:

1. Client submits data and the server returns a different HTML page with a loading animation

2. The server starts processing the data while the client can still use the web app as usual, basically the web app not freezing because of the computation.

3. The computation is finished and the client gets redirected to a page with the results of the processed data.

The problem I am having is how to make the server return a new HTML page when data is submitted and then start computing without the client-side freezing while computing, and then redirecting to the results page.

By the way, I'm very new to Flask.

I have tried to run the function (where the computation happens) inside a separate thread and then return the loading page, but then I need to redirect the client to another page when the computation is finished but then I get lots of errors because the client isn't requesting anything (that is my guess but I don't get any errors specifically saying that), and because it is running outside of the app_context (I don't know anything about app_context ).

Ok, that was a lot of explanation and I know what you're thinking, why not just do the computation and then return the results page with the finished results? Well, that's because I want the UI to look very good and the website to feel responsive and stable, also I want to practice using Bootstrap. Therefore If I wouldn't first return the loading page, the page would just look the same and the user would maybe not understand that the data was submitted and the server has started processing it. The loading page adds a Bootstrap spinner and disables the data entry/form.

Now some extra info to make the problem a little bit easier to solve:

Note: I am coding this part of my web app in a separate file that has a registered blueprint available to register route's, therefor the app variable is not available to me. (The app variable normally has the Flask() class)

Now over to the code, please keep in mind that the following code is a MRE (Minimal Reproducible Example) To make it as easy as possible for you to run it, and therefor the app variable is there but in my code it is not available to me.

To download all nescessary files (main.py and templates folder with html files): Click Here (GitHub)

import random
import time
import threading
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == 'POST':
        file = request.files['file']
        process_thread = threading.Thread(target=example_processing, args=(file,), daemon=True)
        process_thread.start()
        return render_template("processing.html")

    return render_template("home.html")


def example_processing(file):
    # Example of the time the processing takes (not the actual processing I am going to do)
    time.sleep(random.randint(3, 7))
    return redirect(url_for("ranking"))


@app.route("/ranking")
def ranking(filename):
    return render_template("ranking.html")

if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

Remember that the code over is not working code, when you upload a Txt file you will get errors but it gives you an idea of what I want to do.

Also, remember that I do not have the app variable available so I cannot use with app.app_context():

To clarify, the problem is the redirecting.

I know that this may be a difficult question and that I maybe haven't made everything so clear but I have tried my best to make this question as easy as possible to solve and this is my third Flask program so I am pretty new to Flask.

Thank You.

The simplest way to do this is via Asynchronous calls (ajax requests).

1. User clicks the submit button of a form.

2. Via javascript, you intercept the submit and display a busy icon (or whatever you wish to show you're working on the request)

3. You then submit the contents of the form via Ajax (asynchronous request) to your server.

4. When server is done processing, it returns a result to your code. You can then remove the busy icon and do whatever else you want - display the returned result, redirect the user to another page and display the result there, etc

In your scenario, what you want is - server finishes processing and stores the results somewhere (in session memory, memcache or a DB), then the server returns something like 'success' to your javascript code that called the server. Your javascript code then removes the busy icon and redirects to a flask endpoint which reads the output from the server that you'd saved and returns this value to the user.