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 agilecss.com
Resource:
https://stackoverflow.com/questions/8317219/django-show-loading-message-during-long-processing
.png)