turbo: Progress bar is not shown when using Turbo Frames (even with turbo-action="advance")

We looked at invoking the progress bar for everything, but that didn’t seem right. You can have a lot of frames triggering for lazy loading. It would be a very busy progress bar.

What I’d rather do is have an option to explicitly opt-in to using the progress bar when it’s not a full page replace. Could be as simple as data-turbo-progress-bar=true.

👍 it would be a great addition to frames, as a temporary solution:

import * as Turbo from '@hotwired/turbo'

export default () => {
  const adapter = Turbo.navigator.delegate.adapter;
  const progressBar = adapter.progressBar;
  const session = Turbo.session;

  let progressBarTimeout = null;
  document.addEventListener('turbo:before-fetch-request', (event: Event) => {
    const target = event.target;
    if (!(target instanceof HTMLElement)) {
      return;
    }

    if ('true' === target.getAttribute('data-turbo-progress-bar')) {
      if (!progressBarTimeout) {
        progressBar.setValue(0);
      }

      progressBarTimeout = window.setTimeout(() => progressBar.show(), session.progressBarDelay);
    }
  });

  document.addEventListener('turbo:before-fetch-response', () => {
    if (progressBarTimeout) {
      window.clearTimeout(progressBarTimeout);
      progressBar.hide();
      progressBarTimeout = null;
    }
  });
};

Any updates on this?

When using turbo_frame to update content from a slow page it’s really useful to have a progress bar. How can I force the progress bar to shows up?

<%=link_to heavy_contoller_path, data:{turbo_frame: 'results'} do %>
      See results of large query
 <% end %>

<%=turbo_frame_tag 'results' do %>
<% end %>

For the moment I solved using this

// FORCE PROGRSS BAR FOR TURBO FRAMES
document.addEventListener("turbo:before-fetch-request", function(e){
    Turbo.navigator.delegate.adapter.showProgressBar();
})
document.addEventListener("turbo:frame-render", function(e) { // 
    Turbo.navigator.delegate.adapter.progressBar.hide()
})

Yeah, I’d say it’s fair for this to default to true when we use advance. But I’d love to see this as a general control. Then you could also negate. Like data-turbo-progress-bar=false on an advance to NOT show it.

thanks for taking this on @zhisme ❤️

no updates regarding a review / merge yet?

@marcoroth ready for review

@zhisme I think the general idea of having a data-turbo-progress-bar attribute that you can set on a <turbo-frame> is something that could be added to the core library.

Please feel free to explore this idea! Thank you!

Add progress bar and cursor waiting class from tailwind.

I used code from @onEXHovia and @leoplct. Thank you

app/javascript/turbo_progress_bar.js

    const adapter = Turbo.navigator.delegate.adapter;
    const progressBar = adapter.progressBar;
    const session = Turbo.session;

    let progressBarTimeout = null;
    document.addEventListener('turbo:before-fetch-request', function (e) {
        const target = e.target;
        if (!(target instanceof HTMLElement) || target.getAttribute('data-turbo-progress-bar') !== 'true') {
            return;
        }

        if (!progressBarTimeout) {
            progressBar.setValue(0);
        }

        progressBarTimeout = window.setTimeout(() => progressBar.show(), session.progressBarDelay);
        document.body.classList.add('cursor-wait');
    });

    document.addEventListener('turbo:before-fetch-response', () => {
        if (progressBarTimeout) {
            window.clearTimeout(progressBarTimeout);
            progressBar.hide();
            progressBarTimeout = null;
            document.body.classList.remove('cursor-wait');
        }
    });

Import this file in app/javascript/application.js

import "./turbo_progress_bar"

@mateuszbialowas Your solution is nice but after loading is finished progress bar instantly disappear instead of making fast forward to 100% like default behaviour of turbo progress bar.

After digging in turbo source code I came up with solution which fix this problem.

// in config/importmap.rb
pin "turbo_progress_bar"

// in app/javascript/applications.js
import "turbo_progress_bar"

// app/javascript/turbo_progress_bar.js
import * as Turbo from '@hotwired/turbo'

const adapter = Turbo.navigator.delegate.adapter;

document.addEventListener('turbo:before-fetch-request', function(event){
    const target = event.target;
    if (!(target instanceof HTMLElement)) return;

    if (target.getAttribute('data-turbo-action') === 'advance') {
        adapter.formSubmissionStarted(this)
    }
});

document.addEventListener('turbo:before-fetch-response', function(event) {
    adapter.formSubmissionFinished(this);
});

@gap777 it is on review queue I guess. All work regarding feature is done

@zhisme is this completed? Merged? What’s the status?