How to add loading screen before rendering a page in Node.js?

Question

On the home page, I have a form. The POST action is performed after filling it out. In the POST event handler, I create a child process of execution of a python file with the given data in the form. The child process returns a promise and after it is returned, I render the required page. Until the page is rendered, the browser shows a loading animation beside the URL field (the reload button keeps spinning). I have designed my own loading animation and until the page is rendered, I want that animation to run on the page. Where in the script, should I add the function to do it?

index.post("/", function (request, response) {

    let my_url = "" + request.body.my_url + "";

    let py_program = spawn(pyInterpreter, ["run_algorithms/summarize_with_url.py", my_url]);

    py_program.stdout.on("data", data  => {

        console.log("Summary generated!");
        response.render("home.ejs", {summary: data.toString()});

    });
});

Edit (Little Clarity): The python script takes around 15 seconds to run. So, the page won't be rendered until it finishes. So, the client-side js files won't load as they are included in the to-be-rendered page. I want to display an animation until the server responds.

Answer 1

It is not the matter of node, but the browser. You have to attach your spinning event to promise or response await of the POST event.

The easiest solutions is this: you send POST via Ajax, show spinner and wait for response. If the response is valid then EJS will drop your form and show new page. If the response is invalid you hide your spinner.

Use something like this:

$('#form').submit(function(e){
    e.preventDefault()
    $.ajax({method:'POST',
        data:this.serialize(),
        success: function(data){
            if(!data){
                $('#spinner').hide();
                alert ('Your form is invalid!')
            }}})
})