3

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.

Simon Hibbs
  • 5,941
  • 5
  • 26
  • 32

2 Answers2

1

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.com/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.

Community
  • 1
  • 1
lcary
  • 393
  • 2
  • 13
  • I don't have JQuery available in the environment I'm working in. – Simon Hibbs Feb 05 '14 at 09:39
  • Ah, then I'm not sure. JQuery was my ticket to success here. – lcary Feb 05 '14 at 19:27
  • Is not there somthing pure Pythonic, I mean only function I could implement in Flask? – arshpreet Aug 03 '15 at 15:16
  • @arshpreet Do you mean implementing a loading image in pure python code? I'd recommend having a framework load a gif instead of writing Python code to create animated images. By the way, here's another link: https://realpython.com/blog/python/flask-by-example-updating-the-ui/#adding-a-spinner – lcary Sep 05 '17 at 21:28
0

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 complete all the complicate 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.

Ben L
  • 171
  • 1
  • 9