pythonflaskbusy-waiting

Python/Flask/JS - Show waiting screen and continue after 5 seconds of waiting

I'm super new to Flask, and I'm trying to built a small app in python with Flask...

I would like to show a waiting screen and then after 5 seconds, continue to the following page. The problem is, that I don't know where I should put this "action" without the button.. As I have it now, the python code I write does not seem to have an effect..

My code is the following:

I have a waiting_screen.html:

{% block header %}

<head>
<!-- standard stuff -->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">

<style>
  
  #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
  /* Add animation to "page content" */
  .animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
  }
  @-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
  }
  @keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
  }
  #myDiv {
  display: none;
  text-align: center;
  }
</style>

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css"> -->


</head>


<div class="header-with-image" style="width: 100%; background-color:white; height: 70px; color: white;padding:0px;">
      <img class='banner-image' src="{{ url_for('static', filename='images/logo_header.jpg') }}" style="display: block;
      margin-left: auto;
      margin-right: auto;
      width: 8%;
      margin-bottom:<y>px;">
</div>
<div class="row justify-content-center align-items-center" style="width: 100%;
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
    height:100px;
    background-color:#2c3350;
    margin-top:<x>px;
    text-align: center;">
    <h1>Consolidatie Tool</h1>
</div>
<div class='row head valign-wrapper' >
    <div class='col s8 rellax center-align' data-rellax-speed="-2">
        <br>
        <br>
    </div>
</div>

{% endblock %}


{% block content %}
<div style="padding: 2%;font-family: Verdana; margin:15px; text-align: center;margin-left: auto;height: 40%;
margin-right: auto;background: #ffffff;border-radius:4px;border-color:red;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);width:30%;" >
    <form action="/first-page-info-check" method="POST">

    </form>
    <h4 style="text-align:center"> Bezig om documenten te verwerken... </h4>
    <br>
    <head>
        <div id="loader" action="/first-page-info-check"></div>
        <div style="display:none;" id="myDiv" class="animate-bottom" action="/first-page-info-check">
            <h2>Tada!</h2>
            <p>Some text in my newly loaded page..</p>
        </div >
        <script>
        var myVar;
        function myFunction() {
        myVar = setTimeout(showPage, 3000);
        }

        function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("myDiv").style.display = "block";
        }
        </script>
    </head>

</div>


{% endblock %}

The next page is called confirm_upload.html at the url /first-page-info-check , and I have the folliwing flask/python code:

@app.route('/first-page-info-check',methods=['POST', 'GET'])
def waiting():
    time.sleep(5)
    return render_template('confirm_upload.html')

I'm aware that I put the action="/first-page-info-check" at multiple places in the code, this should not be done, but I just don't really understand yet how the placement of actions should be when there is no form..

Hope someone can help me :)

Solution

  • A JavaScript timeout will wait a given amount of time before processing a function. To avoid blocking execution of other components, the timeout is wrapped in a Promise. When the Promise gets resolved after 5000ms, the user gets redirected to your second page. You could technically call this directly, but I decided to call the function on DOMContentLoaded to not start the timeout before everything was loaded.

    function waitForMe() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 5000);
    });
}

document.addEventListener("DOMContentLoaded", function(event) {
    waitForMe().then(() => {
        window.location.href = "/first-page-info-check";
    });
});