Estoy tratando de hacer una pantalla de carga al enviar un formulario. Cuando envío un formulario, la página comienza a cargarse hasta que el backend responde descargando un archivo de Excel. La idea es tener el efecto de "pantalla de carga" solo hasta que el archivo logre descargarse.

html:

 <form action="{% url 'downloadStatusPickingCustomerByCollection' %}" method="POST">{% csrf_token %} <div class="pnl-collection"> <div> <div class="tituloPnl"> <h3>Estado Ordenes de Venta por Colección</h3> </div> <div class="btnExport"> <button onclick="loadDisplay()" class="btn btn-light" type="submit">Exportar</button> </div> </div> <div class="filtro"> <div> <div class="title-select"><span>Colección</span></div> </div> <div> <select class="form-select form-select-sm form-down-report" name="collection-StatusCustomer-name" id="" required> <option value="">- SELECCIONE COLECCIÓN -</option> {% if collections %} {% for collection in collections%} <option value="{{collection.Name}}">{{collection.Name}}</option> {% endfor %} {% endif %} </select> </div> </div> </div> </form>

JavaScript:

 function loadDisplay() { if (document.querySelector(".form-down-report").value != "") { document.getElementById("preloader-camion").style.display = 'block'; jquery(window).load( function () { document.getElementById("preloader-camion").style.display = 'none'; }); } }

Tengo el bakcend desarrollado en django, por lo que en la ruta del formulario puede ver una "etiqueta de URL" de django.