Heavy HTML page, nothing indicates that data is being transfered

[Skealz]

Hi again,

Using Turbo-Flask, when a heavy HTML page is being generated server-side, I see the blue loading bar. This behavior is fine.

But, when the page has been generated server-side, the data is then sent to the client and during that data transfer, nothing indicates that data is being transferred and that the user should wait until it is displayed. I got confused by that myself.

While having heavy webpage is a problem in itself, the user should still be informed of the data transfer (loading times also depends on client internet bandwidth) Without Turbo-Flask, this is correctly done because the usual browser loading indicators only disappear when the page is fully loaded and displayed.

Do you think I can, in Javascript, detect that data is being transferred to inform the user that he should wait ?

[miguelgrinberg]

I'm not sure the server-side is the right place to address this issue, I wouldn't really know what to do to improve on this. It sounds to me like your problem is with the turbo.js library, which does not do a great job of indicating to the user that they need to wait for the page to download.

[Skealz]

I solved this by adding a Loading indicator.

    <script>
    $(document).ready(function() {
        $("#loading-indicator").hide()

        $('#basic_form select').change(function() {
            $("#loading-indicator").show()
            $('input[name="prog_submit"]').val('true');
            $('#basic_form button[type=submit]').click();
        });

        $('#basic_form button').click(function() {
            $("#loading-indicator").show()
        });
    });
</script>