Show Loading Message After Submitting a Form Django.How

Author avatar wrote on 06/06/2022

If we have a view that it takes time to load, we want to show the user a message to wait, it takes some time

What I want to do

1. Create div to be loaded
2. Create JS to load that div after submission
3. Create Partial template
4. Include the partial template inside our base template and use it when needed
5. Add code to the form to fire the JS after submission

JS code in partial

We have created the div and the JS and added them inside the template partials/_loading-modal.html
Create partials/_loading-modal.html and place the code below

# Include it base.html

{% include 'partials/_loading-modal.html' %}

# Use when submitting a form

add the class show-loading-after-submit to any form you want to show the loader

# Use when clicking on a URL to load a view

add the class show-loading-after-click to any url (a element) you want to show the loader

Note: If you want to test with these CSS classes, you can get the open-source CSS file at