- Entering a new value in a field and tabbing out of that field.
- Pressing the save button.
- Pressing the submit button.
- When entering a new value, that new value might need to be validated, or another field re-calculated based on this new value.
- When saving, a round trip to the database is typically needed.
- When submitting, the data might need to be sent to another backend system, and a new page sent to the user.
- While the form is updated in response to users changing a value, starting with version 4.11, Orbeon Forms shows a non-intrusive slim loading bar at the top of the page, as done natively by Safari when loading a page, and by popular websites like YouTube and GitHub during Ajax requests. This replaces the red "Loading..." indicator shown at the top-right of the page in Orbeon Forms 4.10 and earlier.
- When a button like save is pressed, you want to give users immediate feedback that something is happening, without preventing users from interacting with the rest of the page. (If they do a change while data is saved, that change just won't be saved, and users will get a chance to save it later.) Starting with version 4.11, when buttons like save are pressed, a spinner inside the button, as in the animation below.
- When users hit submit, they are often taken to another page. If they manage to change the value of a field after they hit submit, but before the next page loads, should they expect that change to be taken into account? Even if you can find plenty of websites that allow fields to be changed after the submit button is pressed, we think this practice is as at best confusing, and should be avoided. This is why, out-of-the-box, when a button like submit is pressed, while the action is performed, a spinner is shown at the center of the page, and the page is greyed-out preventing any user input. You can also see this in the animation below.
Finally, starting with version 4.11, you can configure, for each button, which loading indicator you'd like Orbeon Forms to use:
- a spinner inside the button, without blocking user's input, called the inline loading indicator;
- a spinner in the middle of the page, blocking user's input, called the modal loading indicator;
- no spinner at all.
Post a Comment