Debounce

Delay execution until input activity settles.

html

<div class="lod-dbn-stage" data-scenario="search">
  <p class="lod-dbn-label">search events</p>
  <div class="lod-dbn-track">
    <span class="lod-dbn-tick" style="left:10%;"></span><span class="lod-dbn-tick" style="left:22%;"></span><span class="lod-dbn-tick" style="left:30%;"></span><span class="lod-dbn-tick" style="left:38%;"></span>
    <span class="lod-dbn-fire" style="left:calc(38% + 400px / 6); background:#F5C2E0;"></span>
  </div>
  <p class="lod-dbn-caption">Each event resets the 400ms timer &mdash; the request only fires once activity settles</p>
</div>
<style>
.lod-dbn-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.lod-dbn-label { margin: 0 0 8px; text-transform: capitalize; }
.lod-dbn-track { position: relative; height: 26px; background: #24143011; border-radius: 999px; }
.lod-dbn-tick { position: absolute; top: 4px; width: 3px; height: 18px; background: #24143044; border-radius: 2px; }
.lod-dbn-fire { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 999px; }
.lod-dbn-caption { margin: 8px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-scenario="search">
  <p class="m-0 mb-2 capitalize">search events</p>
  <div class="relative h-[26px] bg-[#24143011] rounded-full">
    <span class="absolute top-1 w-[3px] h-[18px] bg-[#24143044] rounded-sm" style="left:10%;"></span><span class="absolute top-1 w-[3px] h-[18px] bg-[#24143044] rounded-sm" style="left:22%;"></span><span class="absolute top-1 w-[3px] h-[18px] bg-[#24143044] rounded-sm" style="left:30%;"></span><span class="absolute top-1 w-[3px] h-[18px] bg-[#24143044] rounded-sm" style="left:38%;"></span>
    <span class="absolute top-[3px] w-5 h-5 rounded-full" style="left:calc(38% + 400px / 6); background:#F5C2E0;"></span>
  </div>
  <p class="mt-2">Each event resets the 400ms timer &mdash; the request only fires once activity settles</p>
</div>

react

export function Debounce({
  delay = 400,
  scenario = "search",
  showKeystrokes = true,
  accent = "#F5C2E0",
}) {
  const ticks = [10, 22, 30, 38];
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <p style={{ margin: "0 0 8px", textTransform: "capitalize" }}>{scenario} events</p>
      <div style={{ position: "relative", height: 26, background: "#24143011", borderRadius: 999 }}>
        {showKeystrokes && ticks.map((t) => (
          <span key={t} style={{ position: "absolute", top: 4, left: `${t}%`, width: 3, height: 18, background: "#24143044", borderRadius: 2 }} />
        ))}
        <span style={{ position: "absolute", top: 3, left: `calc(38% + ${delay}px / 6)`, width: 20, height: 20, borderRadius: 999, background: accent }} />
      </div>
      <p style={{ margin: "8px 0 0" }}>Each event resets the {delay}ms timer &mdash; the request only fires once activity settles</p>
    </div>
  );
}