Ajax "loading" spinners go forever when request fails

[Aaron Wells]

Users are always coming to us with problem descriptions that sound like this, "I uploaded something and the spinner kept loading forever," or, "I tried to install and it kept saying loading forever".

The problem is that when we do stuff via ajax we put up a "loading" spinner until the request comes back. But, if the request fails, then the spinner never comes down and the user waits and waits and waits, and thinks that the problem is a timeout rather than a server back-end error.

It would be good if we could come up with an across-the-board solution for this.

[Aaron Wells (u-aaronw)]

A few possible solutions:

1. A timeout on the spinner. If it waits too long, the spinner goes away and is replaced with an error notifier. The problem with this, is knowing how long to make the timeout. If a long-running request is actually still going on, then changing to "error" may cause some inconsistent results (unless we can also kill the request?). Different timeouts may be appropriate for different ajax calls, so this should be an optional parameter.

2. Make the ajax response scripts more robust, so that they always return a valid response, no matter what. This might be something we could do by perhaps using a different error handler if you set the JSON flag on a script.

3. Make the ajax request code more robust, so that if it receives a garbled response, it switches to an error message.

I haven't looked into this too deeply yet, so I'm not sure whether, in a failure, the script on the server returns no response, or whether it returns a response that is not valid json. This could affect which choice is best. It's possible that we should implement more than one of these options.

[Jono M (jonom)]

(3) seems the most robust - that would be my preference. sendjsonrequest() (mahara.js:202) seems to be used pretty much universally for AJAX requests but error callbacks aren't given most of the time. However, if an error callback is given it is called in pretty much any situation (XHR error, invalid JSON, JSON with an 'error' property, etc.)

I notice that function already uses displayMessage() to display errors in some circumstances, but there are quite a few when it relies on the error callback to display anything.

It would be nice to replace the spinner with an error message, but a simple fix could be to modify that function so that that a message is displayed at the top of the screen whenever it encounters an error. It wouldn't make the spinner go away, but it would at least be an indicator that something went wrong.