LOW: Race condition on rapid AI icon generation — no abort controller #7

New issue

Closed

opened 2026-05-09 05:11:22 +00:00 by Mark · 0 comments

Mark commented

2026-05-09 05:11:22 +00:00

Owner

Severity: LOW

Location

tokengenerator.html, lines 354-358:

const img = new Image();
img.onload = () => {
    generatedIconImage = img;
    iconSelect.value = 'none';
    drawToken();
};
img.src = imageUrl;

Description

If a user rapidly clicks the "Generate New Icon" button multiple times, each click fires off a new API request and creates a new Image object. There is no abort controller (AbortController) to cancel in-flight requests. Since the image loading is asynchronous, out-of-order completion can occur:

User clicks Generate — Request A starts
User clicks Generate again — Request B starts
Request B completes quickly (small image)
Request A completes later (larger image) — overwrites the result the user just saw

This creates a confusing UX where the "last click" doesn't produce the expected result.

Recommended Fix

Use an AbortController to abort the previous fetch when a new request starts.
Track a request counter and only apply results from the latest request.
Disable the button while a request is in-flight (button is currently disabled, but no request cancellation happens).

Impact

Confusing UX — user may see an old/incorrect icon after the "latest" generation completes.

## Severity: LOW ## Location `tokengenerator.html`, lines 354-358: ```javascript const img = new Image(); img.onload = () => { generatedIconImage = img; iconSelect.value = 'none'; drawToken(); }; img.src = imageUrl; ``` ## Description If a user rapidly clicks the "Generate New Icon" button multiple times, each click fires off a new API request and creates a new `Image` object. There is no abort controller (`AbortController`) to cancel in-flight requests. Since the image loading is asynchronous, out-of-order completion can occur: 1. User clicks Generate — Request A starts 2. User clicks Generate again — Request B starts 3. Request B completes quickly (small image) 4. Request A completes later (larger image) — overwrites the result the user just saw This creates a confusing UX where the "last click" doesn't produce the expected result. ### Recommended Fix - Use an `AbortController` to abort the previous fetch when a new request starts. - Track a request counter and only apply results from the latest request. - Disable the button while a request is in-flight (button is currently disabled, but no request cancellation happens). ### Impact Confusing UX — user may see an old/incorrect icon after the "latest" generation completes.