Activity indicator
The current implementation of the website uses this pattern:
- Initiate action
- Show snackbar
- ...
- Data received, state updated
- Show snackbar
In step 3 above, the user has no idea that the application is waiting for a response or that the operation timed out.
Consider the accession browse page https://beta.genesys-pgr.org/a:
When the user applies filters the following should happen:
- Show snackbar
- Inject the
<Loading />
indicator before the current list of results. - The loading indicator should stay visible until new data is received.
If the request fails show a snackbar. Hide the ` indicator.
How do we control for two clicks?
- We can either wait for the current request to finish
- or better, cancel the request and start a new one
The second approach is much more user friendly so let's try that. Example for canceling Axios requests at https://github.com/axios/axios/issues/1361
Demo
Demonstrate this on the accession browse page and we can come up with a solution that will be applied across the entire application.