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.

Related and worth reading : stackoverflow.com/questions/1404376/… — Pogrindis
– Pogrindis, Commented Apr 17, 2019 at 15:40
@Pongrindis I think my question was unclear. What the problem is that 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. — Vighnesh Raut
– Vighnesh Raut, Commented Apr 18, 2019 at 2:34

Ivan Kolyhalov · Accepted Answer · 2019-04-17 15:37:51Z

0

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!')
            }}})
})

answered Apr 17, 2019 at 15:37

Ivan Kolyhalov

1,00212 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related