How to provide a good User Experience with a slower app

Question

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?

Answer 1

The basic approach would be to allow your local changes to override the received updates for a time, perhaps with some visual indication that your changes are pending. Something like this:

if (locally commanded state != updated state and time since command < 10 seconds)
   show locally commanded state with pending indication
else
   show updated state