Progress bar not displayed when submitting a form

[coorasse]

I noticed that the progress bar is not displayed when submitting a form.
While trying to understand the reason, I noticed that showProgressBarAfterDelay is called only after the submit is finished.
The method is called by visitRequestStarted, called by startRequest, and by keep going back into the stack, they are called into formSubmissionSucceededWithResponse, so when the submit is already terminated.

The result is that the progress ber is not displayed.

Is this a bug, or did I miss something?

[jeffochoa]

I'm having the same issue, it looks like you have to redirect AFTER handling the form-submission:

Turbo Drive handles form submissions in a manner similar to link clicks. The key difference is that form submissions can issue stateful requests using the HTTP POST method, while link clicks only ever issue stateless HTTP GET requests.

After a stateful request from a form submission, Turbo Drive expects the server to return an HTTP 303 redirect response, which it will then follow and use to navigate and update the page without reloading.

That doesn't work for me because I want to redirect the users to a different page, and that extra request is not ideal.

An option for me would be to disable Turbo on the actual form, but right now that's not possible, although there is an open PR for that #3

Hopefully that one will get merged soon 🤞

@coorasse please let me know if you find a workaround for this issue.

Cheers,
Jeff.

[jeffochoa]

Ok, I found a temporal solution. Using the custom turbo events, you can capture the submit-start to load the progress-bar manually as follows:

<script>
    document.addEventListener('turbo:submit-start', function () {
        Turbo.navigator.delegate.adapter.showProgressBar();
    });
</script>

[sudara]

I posted on the Hotwire forums asking whether it should be default for the progress bar to always show on form submission. Otherwise, repeatedly rejected forms can appear as no-ops...

[wnm]

Ok, I found a temporal solution. Using the custom turbo events, you can capture the submit-start to load the progress-bar manually as follows:

<script>
    document.addEventListener('turbo:submit-start', function () {
        Turbo.navigator.delegate.adapter.showProgressBar();
    });
</script>

Is this still working for the latest version of Turbo? I'm loading Turbo via the hotwire-rails gem (and via the asset pipeline) and I get a Turbo is not defined error....

[todddickerson]

@wnm try

import { Turbo } from "@hotwired/turbo-rails"
window.Turbo = Turbo // Turbo available throughout app