title: Display a ‘loading’ message while a time consuming function is executed in Flask
body: <p>I’m still relatively new to Flask, and a bit of a web noob in general, but I’ve had some good results so far. Right now I’ve got a form in which users enter a query, which is given to a function that can take anywhere between 5 and 30 seconds to return a result (looking up data with the Freebase API). </p>
  
  <p>The problem is that I can’t let the user know that their query is loading during this time, as the results page only loads once the function finishes its work. Is there a way I can display a loading message while that's going on? I found some Javascript that could display a loading message while page elements are still loading, but my waiting period happens before ‘render_template’.</p>
  
  <p>I knocked together some example code, just to demonstrate my situation:</p>
  
  <p>Python:</p>
  
  <pre><code>from flask import Flask
  from flask import request
  from flask import render_template
  import time
  
  app = Flask(__name__)
  
  def long_load(typeback):
      time.sleep(5) #just simulating the waiting period
      return "You typed: %s" % typeback
  
  @app.route('/')
  def home():
      return render_template("index.html")
  
  @app.route('/', methods=['POST'])
  def form(display=None):
      query = request.form['anything']
      outcome = long_load(query)
      return render_template("done.html", display=outcome)
  
  if __name__ == '__main__':
      #app.debug = True
      app.run()
  </code></pre>
  
  <p>Excerpt from index.html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;h3&gt;Type anything:&lt;/h3&gt;
      &lt;p&gt;
      &lt;form action="." method="POST"&gt;
          &lt;input type="text" name="anything" placeholder="Type anything here"&gt;
          &lt;input type="submit" name="anything_submit" value="Submit"&gt;
      &lt;/form&gt;
      &lt;/p&gt;    
  &lt;/body&gt;
  </code></pre>
  
  <p>Excerpt from done.html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;h3&gt;Results:&lt;/h3&gt;
      &lt;p&gt;
          {{ display }}
      &lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated, I hope this example helps.</p>