vanilla-js-ui-race-conditions_skill

Overview

This skill provides practical patterns to handle DOM race conditions and optimistic UI pitfalls in vanilla JavaScript when working with mixed rendering models like VRM and Live2D. It focuses on reliable DOM binding, safe state reconciliation, and minimal, framework-free techniques to prevent flicker, missed events, and state overwrites. The guidance is lightweight and designed for real product code where DOM elements may be lazily created or backend state lags.

How this skill works

The skill inspects common failure modes: late-created DOM nodes, lazy-loaded modules, and optimistic front-end updates that conflict with canonical state. It offers a self-terminating polling binder to attach listeners only after elements exist, plus a prioritized state-read strategy that respects loading/disabled UI and optimistic caches. Both patterns avoid arbitrary time assumptions and reduce fragile setTimeout hacks.

When to use it

• When DOM elements are created lazily (first interaction triggers createElement) and event handlers may miss binding.
• When optimistic UI updates show a temporary state before the backend confirms and other components may override it.
• When multiple presentation models (e.g., Live2D and VRM) create inconsistent element IDs or timing.
• When you need a minimal, framework-free approach to robustly attach listeners and reconcile state.

Best practices

• Never rely on fixed setTimeout durations to assume DOM readiness; use recursive self-clearing polling that stops once successful.
• Treat disabled/loading UI as authoritative for synchronization decisions: prefer optimistic cache or backend flags while UI is disabled.
• Prefer single-direction state reads: when UI is interactive, trust DOM; when it’s loading, trust cached optimistic or backend state.
• Attach listeners only after confirming element presence to avoid duplicate timers or dangling references.
• Make polling idempotent and self-terminating so it leaves no timer garbage after success.

Example use cases

• Binding change/click listeners for Live2D/VRM control panels that are created on first user interaction.
• Avoiding UI flicker when toggling agent features that use optimistic updates while backend sync is pending.
• Reconciling a cached optimistic toggle with a polling app that reads default DOM state and might overwrite it.
• Implementing safe event binding in a modular metaverse UI where different modules load at different times.