title: Asynchronous behaviour in flask while model does the prediction
body: <p>I am developing a web app for predicting stock prices using the Flask framework.
  There are 3 charts in my web app that I want to display to the user once they enter the input (i.e ticker, start date, end date).</p>
  <ol>
  <li>closing price chart</li>
  <li>Box plot</li>
  <li>prices predicted by my model</li>
  </ol>
  <p>while my model predicts the prices of the given stock, I want to display the first two charts to the user as the model takes approximately 30sec to predict the price and I don't want a blank screen during that period of time. Once the prediction has been done by the model, i want to display the third chart to the user.</p>
  <p>how can i achieve this in flask? below is my flask code to render the template</p>
  <pre><code>@app.route('/', methods=['POST'])
  def home():
      if request.method == 'POST':
          df = getdf() #this will get the user input and fetch the corresponding data
          jsonLine, jsonBox = plotGraphs(df)  #this will plot the first 2 charts and return json data of the chart
          train, valid = buildModel(df)  #here model does the prediction and returns the same
          predictionJson = viz.plotPrediction(train, valid)  #this will plot the predictions
          return render_template('chart.html', jsonLine=jsonLine, jsonBox=jsonBox, predictionJson=predictionJson)
      return render_template(&quot;chart.html&quot;)
  </code></pre>
  <pre><code>HTML code:
  
  &lt;div id=&quot;lineChart&quot; class=&quot;chart&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;boxPlot&quot; class=&quot;chart2&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;prediction&quot; class=&quot;chart2&quot;&gt;&lt;/div&gt;
  </code></pre>
  <pre><code>JavaScript code:
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      function drawPlotlyGraph(graph, id) {
          Plotly.plot(id, graph, {});
      }
      let lineChart = {{ jsonLine | safe}};
      drawPlotlyGraph(lineChart, &quot;lineChart&quot;)
  
      let boxPlot = {{ jsonBox | safe}};
      drawPlotlyGraph(boxPlot, &quot;boxPlot&quot;)
  
      let prediction = {{ predictionJson | safe}};
      drawPlotlyGraph(prediction, &quot;prediction&quot;)
  &lt;/script&gt;
  </code></pre>