GitLab

The current implementation of the website uses this pattern:

1. Initiate action
2. Show snackbar
3. ...
4. Data received, state updated
5. 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:

1. Show snackbar
2. Inject the <Loading /> indicator before the current list of results.
3. 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?

1. We can either wait for the current request to finish
2. 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.