Animate when boosting (puffing up)

app/javascript/controllers/animation_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static classes = [ "play" ]
+
+  async play() {
+    await nextFrame()
+    this.element.classList.remove(this.playClass)
+    this.#forceReflow()
+    this.element.classList.add(this.playClass)
+  }
+
+  #forceReflow() {
+    this.element.offsetWidth
+  }
+}

app/javascript/controllers/toggle_class_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "toggle" ]
+
+  toggle() {
+    this.element.classList.toggle(this.toggleClass)
+  }
+}

app/javascript/helpers/timing_helpers.js

@@ -0,0 +1,39 @@
+export function throttle(fn, delay = 1000) {
+  let timeoutId = null
+
+  return (...args) => {
+    if (!timeoutId) {
+      fn(...args)
+      timeoutId = setTimeout(() => timeoutId = null, delay)
+    }
+  }
+}
+
+export function debounce(fn, delay = 1000) {
+  let timeoutId = null
+
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn.apply(this, args), delay)
+  }
+}
+
+export function nextEventLoopTick() {
+  return delay(0)
+}
+
+export function onNextEventLoopTick(callback) {
+  setTimeout(callback, 0)
+}
+
+export function nextFrame() {
+  return new Promise(requestAnimationFrame)
+}
+
+export function nextEventNamed(eventName, element = window) {
+  return new Promise(resolve => element.addEventListener(eventName, resolve, { once: true }))
+}
+
+export function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}