I am trying to make a loading screen when submitting a form. When I submit a form the page starts to load until the backend responds by downloading an excel file. The idea is to have the effect of "load screen" only until the file manages to download.

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';
            });
    }
}

I have the bakcend developed in django so in the form route you can see a django "url tag".