Skip to content

Instantly share code, notes, and snippets.

@dbreunig
Last active February 22, 2024 03:20
Show Gist options
  • Save dbreunig/ad76babefac94e5e943621b7870463ca to your computer and use it in GitHub Desktop.
Save dbreunig/ad76babefac94e5e943621b7870463ca 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