2

I have a python app built on flask, now before render_templateis called, the function that passes data values to the html takes a long time to execute. As a result, when I click http://127.0.0.1:5000/ i see a white screen for around 30secs./ 1minute before the html is displayed.Code is something like this 

@app.route('/')
<a long time taking function to pass values to the render function below
return render_template ('xxx.html',args.values...argsn.valuen) 
if __name__=="__main__":
    app.run()

How do I add a preloader gif even before the render_template html is called? I have seen some answers which talk about displaying a loading gif on click of a button or something like that, but I need to display the loading gif at first load time and when the http://127.0.0.1:5000/ is refreshed using the refresh icon in toolbar. I tried some CSS/HTML tinkering but they only come into picture AFTER the render_template html is called. The program spends a bulk of its time before the render function is even called.

Sukirti Sen
  • 35
  • 1
  • 9

1 Answers1

0

Can you separate into two pages: first page displays loading GIF and then redirects (via JavaScript?) to second page which is going to take a long time to render.

Nik Shenoy
  • 691
  • 6
  • 12
  • useful suggestion, the first part for me is done. I used the following app = Flask(__name__) @app.route('/') def about(): return render_template('base.html') @app.route ('/Home')... so base,html is nothing but a load spinner and it redirects to to the home page when the time taking function has finished executing... But , my second part is still left, once the home page is loaded and on clicking the refresh icon in the browser toolbar the loading gif should come again, but now of course http://127.0.0.1:5000/Home is getting refreshed which does not have the load spinner gif... – Sukirti Sen Apr 30 '18 at 20:32
  • I suspect you could do this by trapping the **onbeforeunload** event in JavaScript and showing the loading image (see [example](https://stackoverflow.com/questions/14806138/show-a-loading-gif-beforeunload-of-a-page)), but it seems that may not work in all browsers (especially mobile). Another alternative is to do this via Ajax calls (i.e. the main page loads and then fills in a section via ajax call after loading; main page shows loading gif; the loading gif can be replaced by the HTML results from the Ajax call once it's complete) – Nik Shenoy Apr 30 '18 at 21:31