Add autosaving to the profile settings page

Problem

Lately, we have been looking to improve the user experience when users need to change and save information through our UI. The problems we currently have are most obvious on large settings pages. We only relly on manually saving the changes made on these pages which can sometimes be really long. The 'Save changes' button is pushed way below the fold so the user that makes a change needs to scroll all the way down to find the button to be able to save the changes made.

This is why we started looking into improving these experiences through autosaving. We're in the process of writing guidelines for different approaches in autosaving, when and how they should be used in gitlab-design#121 (closed)

The guidelines will be added to the Design System in 11.5 via gitlab-org/design.gitlab.com#112

Proposal

We would then like to introduce the autosaving to a settings page and came to the conclusion that the Profile settings page is a good candidate for being the pilot. We expect we'll improve the experience of changing the information on this page and learn if our new patterns and guidelines work well in practice.

Whenever a user makes a change we save it automatically. If the change is made via an input field we save on the blur event and x seconds after the user stops typing (x to be defined). When the change is being saved we show a toast message at the bottom left with the message 'Saving…'. When the change is successfuly saved we show a message 'Changes saved' and an option to undo. We'll also need to show errors for when the change isn't saved successfuly (probably with a 'Try again' option). The toast message should be displayed below the nav bar on mobile screens (feedback from FE required).

Solution

TBD

/cc @akaemmerle @jeremy_