Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brandondrew/f503d6174cebd6d32b7fd07e774ea955 to your computer and use it in GitHub Desktop.
Save brandondrew/f503d6174cebd6d32b7fd07e774ea955 to your computer and use it in GitHub Desktop.
Poor man's form button progress indicator, in Stimulus, for those long processing requests.
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
addEventListener("turbo:submit-end", ({ target }) => {
clearInterval(this.interval);
this.element.innerHTML = this.originalLabel;
})
this.originalLabel = this.element.innerHTML;
}
click(event) {
let button = event.target;
button.innerHTML = '...';
// Remove the label from the button
let labelStates = [
'•..', '••.', '•••',
'.••', '..•', '...'
];
let currentIndex = 0;
this.interval = setInterval(() => {
button.innerHTML = labelStates[currentIndex];
currentIndex = (currentIndex + 1) % labelStates.length;
}, 500);
}
disconnect() {
clearInterval(this.interval);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment