Progress bar completely missing in Rails 7.1

[noctivityinc]

This is a weird one because I cant seem to find anyone else posting about this. The progress bar NEVER appears. The CSS styles are there, but there is no progress bar when clicking any turbo frame or turbo stream event.

Here's my env:

ruby "3.3.4"
gem "rails", "~> 7.1.3", ">= 7.1.3.4"
gem "jsbundling-rails"
gem "turbo-rails"
gem "stimulus-rails"
gem "cssbundling-rails"

and package.json

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.4",
    "@rails/actioncable": "^7.2.0",
    "@tarekraafat/autocomplete.js": "^10.2.7",
    "alertifyjs": "^1.14.0",
    "bootstrap": "5.3.3",
    "choices.js": "^10.2.0",
    "dropzone": "^6.0.0-beta.2",
    "esbuild": "^0.21.4",
    "local-time": "^3.0.2",
    "notyf": "^3.10.0",
    "sass": "^1.77.8",
    "sortablejs": "^1.15.2",
    "vanilla-context-menu": "^1.6.0",
    "web-animations-js": "^2.3.2"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap  --format=esm --outdir=app/assets/builds --public-path=/assets",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

What could be causing this? Did progress bar become an option at some point?

[4lllex]

Progress bar appears after 500ms by default. It doesn't appear for turbo frame requests.

https://turbo.hotwired.dev/reference/drive#turbo.setprogressbardelay

[noctivityinc]

Wait - it doesnt appear for TURBO FRAME requests? Why not? That seems super odd. How can we fix that?

…

On Aug 27, 2024 at 6:00:34 PM, Alex ***@***.***> wrote: Progress bar appears after 500ms by default. It doesn't appear for turbo frame requests. https://turbo.hotwired.dev/reference/drive#turbo.setprogressbardelay — Reply to this email directly, view it on GitHub <#1298 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATIAQTFCC6GM5ZPGNCPNLZTTZIFAVCNFSM6AAAAABMY247ZOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJTGY2TCMZYGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[4lllex]

I don't know why. But you could use busy attribute of turbo frame to add some loading style:

turbo-frame {
  display: inline-block;
  position: relative;
}
turbo-frame:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.0);
  z-index: 100;
  pointer-events: none;
}
turbo-frame[busy]:before {
  content: "loading...";
  background-color: rgba(255, 255, 255, 1);
  transition-property: background-color;
  transition-duration: 0.4s;
  transition-delay: 0s;
}

or use events to show the progress bar:

document.addEventListener("turbo:before-fetch-request", (event) => {
  if (event.target.nodeName === "TURBO-FRAME") {
    Turbo.session.adapter.progressBar.show()
  }
})

document.addEventListener("turbo:frame-load", (event) => {
  Turbo.session.adapter.progressBar.hide()
})