Request/Success/Failure Cycle

Keeping the user informed.

Many actions in our app involve making asynchronous calls to the backend server.

The login screen is a good example; upon entering his login details and hitting "sign-in", the user would very likely want to know the outcome of his action and would thus ask the following questions:

  1. have I actually sent the login request?

  2. did I enter the correct details?

  3. and if hitting "sign-in" did not log me in, what went wrong?

Thus, to address these questions faced by the user, we had to track the status of all the aynchronous requests made by the user while using the app.

We did this by first adding 2 fields to our global-stores:

  • loading (default: false)

  • error (default: null)

Upon performing an action that involves a asynchronous request, the value in the `loading` field is updated to 'true', whereupon a loading-snackbar appears on the screen to let the user know that the app has registered his action successfully (hence addressing question 1)

However, not all actions may be completed successfully for various reasons: perhaps the user left a field blank, or the app cannot communicate with the backend-server due to a lack of internet connection.

Therefore, we ensured that at the end of every asychronous call, any error messages returned by the backend is stored in the èrror`field of the global-store, so that the user may know how to rectify the problem.

This takes the form of an error-snackbar, which the user can acknowledge and proceed with using the app. Upon acknowledgement, the error message is cleared from the `error field of global-store.

Last updated