Skip to content

UX/UI Improvement: Missing Visual Feedback and Inadequate Timeout Management #210

@nocturnalprelude

Description

@nocturnalprelude

Issue Description:

The current implementation of send_http() and getResponse() lacks asynchronous feedback for the user. When a configuration update or a data request is triggered, there is no visual indicator (e.g., a loading spinner or a disabled state for buttons) to signal that a process is underway.

Technical Details:

Blocking Experience: The default timeout is set to 10 seconds (10000ms). During this window, if the device's web server is slow to respond—which is common during a Wi-Fi scan or a reboot cycle—the user is left with a static interface, leading to repeated button clicks and redundant requests.

Generic Error Handling: The timeoutCallback triggers a generic "Device connection lost" popup. This message is often misleading, as it appears even when the device is simply busy processing the previous request, causing unnecessary user concern.

UI State Persistence: Buttons remain active during the request execution. For example, in the set_wifi() function, the "Save" button can be pressed multiple times while the first request is still pending in the browser's network stack.

Potential Impact:

Poor User Perception: The interface feels unresponsive or "frozen," leading to a degraded user experience.

Server Overload: Multiple rapid clicks on "Save" or "Rescan" can overwhelm the limited request buffer of the ESP8266/ESP32 chip, potentially causing a crash or a hard hang of the web server.

Recommended Action:

Implement Request States: Disable action buttons (e.g., #save-wifi, #rescan-wifi) immediately after a click and re-enable them only after the callback or timeoutCallback has fired.

Add Visual Indicators: Introduce a "Loading..." spinner or a progress bar during long-running operations like Wi-Fi scanning (loadWifiList).

Differentiated Feedback: Update the timeoutCallback to distinguish between a literal connection loss and a simple "Request Timed Out" (Server Busy) scenario to provide more accurate troubleshooting info to the user.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions