Performance
In general the faster the app will respond the better it is. Long loading times cause frustration, loss of focus and belief that the app is broken.
What loading indicator to show at what time
Page and partial page loading
The page or ajax call should load under 3 secs. Aim for below 0.5 sec.
When loading takes more than 1 sec, show a spinner. Would the loading continue for more than 10 secs, change the spinner to an estimation of time left.
Background processing
Computations can be made in the background, for example when downloading or exporting data. It can be hard to know when these kinds of processes are going to be done, but it’s more helpful to give the user an estimate instead of showing a spinner.
If loading takes more than 10 secs, show a progress bar that indicates duration. This helps avoiding confusion and shows that the page is not broken. The estimation does not need to be accurate but within reasonable time, say it’s going to take 5 min in the general case then be frank with that instead of saying 1 minute or 1 hour.
Components
We have some components available to help keep this consistent:
- fun-progress-controller - handles showing different elements at the different stages described above.
- fun-progress-circle - show a progress estimate.
