I have a flask app that displays a single page of content, but it takes up to 20 seconds for the content to be generated. It seems to me one way to display a splash screen would be for the main URL endpoint to display a page saying something like 'Loading, please wait...', then redirect to the page that loads the url endpoint with the actual content.

However I can't see how to get this working. If I just write a JS to redirect to the content, the original page disappears immediately so you don't really get to see it at all. How can I trigger a ld of the content while ensuring the loading screen stays put until the content page finishes loading?

I've extensively searched for an answer to this but none of the existing Q/As actualy show how to solve this problem.

I have a flask app that displays a single page of content, but it takes up to 20 seconds for the content to be generated. It seems to me one way to display a splash screen would be for the main URL endpoint to display a page saying something like 'Loading, please wait...', then redirect to the page that loads the url endpoint with the actual content.

However I can't see how to get this working. If I just write a JS to redirect to the content, the original page disappears immediately so you don't really get to see it at all. How can I trigger a ld of the content while ensuring the loading screen stays put until the content page finishes loading?

I've extensively searched for an answer to this but none of the existing Q/As actualy show how to solve this problem.

• javascript
• html
• flask
• jinja2

• stackoverflow./questions/11072759/… – Joe Doherty Commented Feb 3, 2014 at 17:24
• I don't have JQuery available to me unfortunately. – Simon Hibbs Commented Feb 5, 2014 at 9:40

2 Answers 2

I've implemented solutions similar to the one in the following SO Q/A, which suggested using a loading image in a div that is revealed via JQuery: Display a ‘loading’ message while a time consuming function is executed in Flask

Additionally, example JQuery: http://gioorgi./2011/loading-image/

For future reference, could you show some code? It would be easier to explain the solution if I could see some @app.routes and html templates.

I implemented a similar thing for a POST page. Might need different strategy for GET page.

In the template of generating the form for the POST request:

<div id="splash" style="display: none; z-index: 10; position:fixed">It might take up to 10 seconds to plete all the plicate calculation...</div>

<form method="post"  onsubmit="let x = document.getElementById('splash'); x.style.display = 'block';">
...
</form>

The idea is to show the splash page in the client side (browser), after the user click "Submit" button, then in the background the server received the POST message and work to generate the new page and send it back to the browser as soon as it is done.