I am working on an embedded application that has a web server as a GUI. The webserver supports what you would expect, and I am using javascript to request data from the application and supply it to the user.
The user can interact with the hardware by changing physical relays on it. This is all displayed and controlled from a central GUI. The GUI updates every 5 seconds using AJAX.
The issue is that turning on and off these relays can be nearly instant or take up to 4 seconds (really depends how busy the system is). I therefore cannot simply send a "turn this relay off" command and expect that the next update will contain the correct information (it may not be off yet in the real world). To remedy this, when I send a command, I stop my update interval, visually turn the relay off, and wait a max of 4 seconds. There is still an issue, however, that if the user triggered this command while the GUI was updating, the control may come back on immediately, pause for 4 seconds, then update properly.
This is resulting in a really bad UX. At this point the only thing I can think of is having that portion of the GUI lock itself (with some kind of loading... message). Is that my best approach here?