race condition — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The search box race condition</h1>
    <p class="pg-sub">
      Type into the box below. Every keystroke fires a simulated network request with a <em>random</em>
      delay — just like a real API. Watch what lands on screen when an older request finishes after a
      newer one. Flip the mode to see the one-line fix stop it.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field">
        <label class="label" for="searchBox">Type a search term (try it fast)</label>
        <input id="searchBox" type="text" placeholder="e.g. react" autocomplete="off" />
      </div>
      <div class="btn-row" style="margin-top: 12px">
        <div class="seg" role="group" aria-label="Mode">
          <button type="button" id="modeNaive" aria-pressed="true">Naive (no guard)</button>
          <button type="button" id="modeFixed" aria-pressed="false">Fixed (requestId guard)</button>
        </div>
      </div>
      <div class="presets" style="margin-top: 14px">
        <button class="btn sm" id="presetTrap">⚡ Replay the classic trap: react → vue</button>
        <button class="btn sm ghost" id="resetBtn">Reset</button>
      </div>
      <p class="hint">
        The trap preset rigs the timing on purpose — it types "react", then quickly replaces it with
        "vue" while making "react"'s response arrive <em>after</em> "vue"'s. That's the exact bug from
        the article, reproduced on demand instead of waiting for bad luck.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What's on screen</div>
      <div class="output">
        <div class="onscreen">
          Showing results for <span class="q" id="onscreenQuery">—</span>
        </div>
      </div>
      <div class="status" id="statusBox" style="margin-top: 12px">
        <span class="dot info" id="statusDot"></span>
        <span id="statusText">Type something above to begin.</span>
      </div>
      <div class="stat-row">
        <div class="stat">Requests sent<b id="statSent">0</b></div>
        <div class="stat">Rendered correctly<b id="statGood">0</b></div>
        <div class="stat">Wrong result shown<b id="statBad">0</b></div>
        <div class="stat">Dropped as stale<b id="statDropped">0</b></div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Request / response log</div>
      <div class="log" id="log" style="max-height: 220px; overflow-y: auto;"></div>
      <p class="hint" style="margin-top: 10px">
        <span style="color: var(--good)">Green</span> = correct render,
        <span style="color: var(--bad)">red</span> = a stale response overwrote the current one,
        <span style="color: var(--warn)">amber</span> = the fixed mode caught it and dropped it.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.