product category page: front-end sorting and filtering using turboframes

resources/js/stimulus/auto-submit-controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Submits the host <form> a short beat after a control inside it changes,
+// coalescing a burst — rapid slider nudges, or holding an arrow key on a range
+// input — into a single submit. Wire it on the <form>:
+//
+//   <form data-controller="auto-submit"
+//         data-action="change->auto-submit#submit range-slider:change->auto-submit#submit"
+//         data-auto-submit-delay-value="300">   (delay optional, ms)
+//
+// `change` covers native inputs (checkbox, select); the range slider emits its
+// own `range-slider:change` on commit. Uses requestSubmit() (not submit()) so a
+// <turbo-frame> around the form still captures the navigation and validation runs.
+export default class extends Controller {
+    static values = { delay: { type: Number, default: 300 } }
+
+    submit() {
+        clearTimeout(this.#timer)
+        this.#timer = setTimeout(() => this.element.requestSubmit(), this.delayValue)
+    }
+
+    disconnect() {
+        clearTimeout(this.#timer)
+    }
+
+    #timer
+}