Indefinite Progress Bar on Turbo.visit with turbo-stream content

[userLegacy]

Indefinite Progress Bar on Turbo.visit with turbo-stream content

[tpaulshippy]

I could be wrong because your code samples are incomplete, but it appears that you are attempting to mix Turbo Drive with Turbo Streams.

Turbo.visit is meant for Turbo Drive. It is intended for navigating to new pages smoothly.

Returning a text/vnd.turbo-stream.html response is meant to be used as part of Turbo Streams. It allows you to have your back end tell your front end to append, prepend, replace, update, remove, insert before, insert after, morph, or refresh a DOM element by ID. These streams can be sent via websockets, or (as it appears you intend) via javascript AJAX calls. If you want to initiate a turbo stream via javascript, you want to do something like this:

const response = await fetch('/api/get/list', {
            method: 'get', 
            headers: {
                'Accept': 'text/vnd.turbo-stream.html',
            }
        })
        const html = await response.text();
        Turbo.renderStreamMessage(html)

As discussed here, this is made easier by using the @rails/request.js library.

Generally, this should only be necessary if you are wiring up client-side DOM events other than link clicks and form submits to something on your server. For example, loading dependent selects as discussed here.

It might help if you can share more about your use case. I suspect that the progress bar is not going away because your server isn't responding with what is expected from the Turbo.visit call.

[tpaulshippy]

Indeed, if you look at

turbo/src/observers/stream_observer.js

Line 47 in c339144

event.preventDefault()

you will see that the system is designed to intercept turbo stream responses and prevent the default behavior in that case. The default behavior is to succeed or fail the request, resulting in the progress bar being removed. But

turbo/src/http/fetch_request.js

Line 155 in c339144

if (event.defaultPrevented) {

means that the code never gets to that success/failure point.

[userLegacy]

Thanks for your response, yes I know using the fetch api would be useful, but i was experimenting with some infinite scroll and came accross using the Turbo.visit with turbo-stream header and it was very useful in simple cases where the response would just be a turbo-stream.

<turbo-stream action="append" target="list">
    <template>
        <?php $sno = $offset + 1;
        foreach ($list as $record) : ?>
            <tr>
                <td><?= $sno ?></td>
                <td><?= "{$record->first_name} {$record->last_name}" ?></td>
                <td><?= $record->member_id ?></td>
                <td><?= $record->email ?></td>
                <td><?= $record->gender ?></td>
                <td><img src="<?= $record->photo ?>" alt=""></td>
            </tr>
        <?php $sno++;
        endforeach; ?>
    </template>
</turbo-stream>

The thing is there is no issue such like this in the v7.3 and i checked the code you referred to the in the v7.3 and its just the same. Also checked it with some delay <?php sleep(3) ?> in the backend, and the progress bar works in v7.3 and not like its completely off.

Unless I am sending some other data that i would need to work --(like disabling any more request if a particular total is reached)-- with in js, i would happily just add the single line Turbo.visit and forget about anything else.

[tpaulshippy]

Ah so you were trying to use Turbo.visit as an easy way to initiate a GET that returns a turbo stream? Interesting. Looks like that may only work by coincidence in some versions - probably not designed to work that way. Right?

[userLegacy]

Okay i was following the trail and in the v8 there is some missing code that is present in the v7.x.

8.x

turbo/src/http/fetch_request.js

Line 144 in c339144

this.delegate.requestFinished(this)

turbo/src/core/drive/visit.js

Line 340 in c339144

requestFinished() {

turbo/src/core/drive/visit.js

Line 202 in c339144

this.adapter.visitRequestFinished(this)

turbo/src/core/native/browser_adapter.js

Line 57 in c339144

visitRequestFinished(_visit) {}

7.x

turbo/src/http/fetch_request.ts

Line 120 in 4593d06

this.delegate.requestFinished(this)

...

turbo/src/core/drive/visit.ts

Line 251 in 4593d06

this.adapter.visitRequestFinished(this)

turbo/src/core/native/browser_adapter.ts

Line 68 in 4593d06

this.hideVisitProgressBar()

In v8 there is some logic in visitCompleted and not in visitRequestFinished and its the opposite in 7.x.

turbo/src/core/native/browser_adapter.ts

Line 71 in 4593d06

visitCompleted(_visit: Visit) {}

turbo/src/core/native/browser_adapter.js

Line 59 in c339144

visitCompleted(_visit) {

This intended?!?

-- And the progress bar is hidden if i place the code in the function, but unsure how it will affect others!