Display Loading Screen While Processing Form Data in Django View

Question

In Django I have an app that displays welcome message and empty form and then after submiting the form it displays processed data instead of welcome message and the same form in the same place as before, so user can input new data and submit it again. Simplified view code looks like this:

def my_view(request):
    if request.method == "POST":
        my_form = MyForm(request.POST)
        if my_form.is_valid():
            # Do some calculations
            return render(request, 'myapp/my_template.html', {"calculations_results":calculations_results})
    else:
        my_form = MyForm()
        welcome_message = "Hello"
    return render(request, 'myapp/my_template.html', "welcome_message":welcome_message)

And here is html code:

<div class="main-div">
    {% if welcome_message %}
    <div class="welcome-mess-div">
        <div class="welcome-mess-div-2">
            <h1 class="white-text">Hello!</h1>
            <br>
            <br>
            <h5 class="white-text">Welcome to my website, nice to meet you!</h4>
        </div>
        <div class="loading-screen">
            <h1>Loading...</h1>
        </div>
    </div>
    {% else %}
    <div class="results">
        {% for result in calculations_results %}
            <p>{{result}}</p>
        {% endfor %}
    </div>
</div>

<div class="form-div">
<form id="my-form" method="post" enctype="multipart/form-data" onsubmit="displayLoadingScreen()">
    {% csrf_token %}
    {{form.input}}
    <button type="submit"></button>
</form>
</div>

Please note, that because of the if statement ({% if welcome_message %}), it's possible to use only one template for this. As processing form data takes a while, I want to add a loading screen. I already managed to that when submitting the form is done form the 'welcome_message' perspective (GET request), by adding a simple JS function:

function displayLoadingScreen() {
    var welcomeMessage = document.querySelector('.welcome-mess-div-2')
    var loadingScreen = document.querySelector('.loading-screen')

    welcomeMessage.style.display = 'none'
    loadingScreen.style.display = 'flex'
}

but I have no idea how to achieve that if I already submitted the form before and I want to do this again, with new data. Now I just see previous results as I am waiting for the new form data process to finish and I'd like to replace the old results with a loading screen until the new data is processed. Can you help me with that? Is this possible with one template, or should I create a new one? Thanks for help in advance.

Answer 1

Can try passing a method in the onsubmit attribute that will be called when the form submit button is clicked. This will make the loadingForm visible and the my-form itself invisible, respectively, displaying Loading.... After then the form will appear again.

<div id='loadingForm' style='display: none;'>
      Loading...
</div>

<script>
function Load() {
    document.getElementById('loadingForm').style.display = 'block';
    document.getElementById('my-form').style.display = 'none';
  }
</script>


<form id='my-form' method='post' action='' onsubmit='Load()'>
    {% csrf_token %}
    {{ form.as_p }}
    <button type='submit'>add</button>
</form>

You can add a delay after the line: if my_form.is_valid() and see how it works.

import time

time.sleep(5)