Edit Debouncing

Name

Also known as (comma separated)

Brief definition Delay execution until activity stops.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "delayMs", "type": "number", "label": "Debounce delay (ms)", "default": 400, "min": 100, "max": 1500, "step": 100 }, { "id": "placeholderText", "type": "text", "label": "Input placeholder", "default": "Search products…" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showDelay", "type": "toggle", "label": "Show configured delay", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dbn\" data-delay=\"{{delayMs}}\">\n <input class=\"dbn__input\" type=\"text\" placeholder=\"{{placeholderText}}\" style=\"border-color:{{accent}};\" />\n {{#if showDelay}}<p class=\"dbn__delay\">Fires {{delayMs}}ms after you stop typing</p>{{/if}}\n <p class=\"dbn__status\" role=\"status\">Try typing above &mdash; nothing fires until you pause.</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".dbn\");\n if (!el) return;\n var delay = Number(el.dataset.delay);\n var input = el.querySelector(\".dbn__input\");\n var status = el.querySelector(\".dbn__status\");\n var timer = null;\n input.addEventListener(\"input\", function () {\n status.textContent = \"Typing\\u2026\";\n if (timer) clearTimeout(timer);\n timer = setTimeout(function () {\n status.textContent = input.value ? \"Search fired for: \\u201C\" + input.value + \"\\u201D\" : \"Try typing above \\u2014 nothing fires until you pause.\";\n }, delay);\n });\n})();</script>\n<style>\n.dbn { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.dbn__input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 2px solid; border-radius: 8px; font-size: 13px; margin-bottom: 8px; }\n.dbn__delay { margin: 0 0 8px; font-size: 10px; color: #24143099; }\n.dbn__status { margin: 0; font-size: 12px; font-weight: 600; min-height: 18px; }\n</style>", "tailwind": "<div class=\"dbntw font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\" data-delay=\"{{delayMs}}\">\n <input class=\"dbntw__input w-full box-border py-2.5 px-3 border-2 rounded-lg text-[13px] mb-2\" type=\"text\" placeholder=\"{{placeholderText}}\" style=\"border-color:{{accent}};\" />\n {{#if showDelay}}<p class=\"m-0 mb-2 text-[10px] text-[#24143099]\">Fires {{delayMs}}ms after you stop typing</p>{{/if}}\n <p class=\"dbntw__status m-0 text-xs font-semibold min-h-[18px]\" role=\"status\">Try typing above &mdash; nothing fires until you pause.</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".dbntw\");\n if (!el) return;\n var delay = Number(el.dataset.delay);\n var input = el.querySelector(\".dbntw__input\");\n var status = el.querySelector(\".dbntw__status\");\n var timer = null;\n input.addEventListener(\"input\", function () {\n status.textContent = \"Typing\\u2026\";\n if (timer) clearTimeout(timer);\n timer = setTimeout(function () {\n status.textContent = input.value ? \"Search fired for: \\u201C\" + input.value + \"\\u201D\" : \"Try typing above \\u2014 nothing fires until you pause.\";\n }, delay);\n });\n})();</script>", "react": "import { useRef, useState } from \"react\";\n\nexport function Debouncing({\n delayMs = {{delayMs}},\n placeholderText = \"{{placeholderText}}\",\n accent = \"{{accent}}\",\n showDelay = {{showDelay}},\n}) {\n const [status, setStatus] = useState(\"Try typing above \\u2014 nothing fires until you pause.\");\n const timer = useRef(null);\n const onChange = (e) => {\n var value = e.target.value;\n setStatus(\"Typing\\u2026\");\n if (timer.current) clearTimeout(timer.current);\n timer.current = setTimeout(() => {\n setStatus(value ? `Search fired for: \\u201C${value}\\u201D` : \"Try typing above \\u2014 nothing fires until you pause.\");\n }, delayMs);\n };\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <input type=\"text\" placeholder={placeholderText} onChange={onChange}\n style={{ width: \"100%\", boxSizing: \"border-box\", padding: \"9px 12px\", border: `2px solid ${accent}`, borderRadius: 8, fontSize: 13, marginBottom: 8 }} />\n {showDelay && <p style={{ margin: \"0 0 8px\", fontSize: 10, color: \"#24143099\" }}>Fires {delayMs}ms after you stop typing</p>}\n <p role=\"status\" style={{ margin: 0, fontSize: 12, fontWeight: 600, minHeight: 18 }}>{status}</p>\n </div>\n );\n}" }