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

Hi,

The documentation specifically mentions that the progress bar is for Turbo Drive but if you use Turbo Frames with URL history support such as when using <a href="/profile" data-turbo-frame="main" data-turbo-action="advance"> then it’s somewhat expected that the progress bar would be shown here because this page transition may happen within 50ms or 5000ms due to external network events that’s out of our control.

You can test that it’s not being shown by adding a sleep 1 between Turbo Frame page transitions and not seeing the progress bar where as if you remove the frame so that Turbo Drive picks it up then the progress bar is shown. This is with v7.1.0.

Can we make a case here to show the progress bar for all Turbo Frame events regardless of it being done with turbo-action="advance"? I’m guessing this was very thoroughly investigated at Hey / Basecamp but that discussion isn’t in the issue tracker here. Am I missing something important that would make showing the progress bar for all Turbo Frame events a bad idea?

[dhh]

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.

[onEXHovia]

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