Add loading state when changing preferences in MR
## Problem When toggling between any of the user preferences in <abbr title="merge request">MR</abbr>s (e.g. inline and side-by-side modes, single-file mode, whitespace changes), the UI can sometimes freeze for a moment with no indication of activity. ## Proposal In https://gitlab.com/gitlab-org/gitlab/-/merge_requests/62192#note_613190153 we explored showing a spinner in the affected areas (e.g. changing to single-file mode would show a spinner in the diffs area only), but it didn't seem very seamless — probably because there's a big “repaint”, showing a huge white rectangle and a spinner. Instead, keeping the elements where they are seems more seamless. Perhaps there's a middle-ground between showing progress while keeping it fluid. What if we simply made the affected elements more transparent, with a “ghost” appearance? For example: | Changing file browser | Changing diffs | |-----------------------|----------------| | ![CleanShot_20210628165043_2x](https://gitlab.com/gitlab-org/gitlab/uploads/9b09ab37d79182bb4cc9cb7e1b22e522/CleanShot_20210628165043_2x.png) | ![CleanShot_20210628165018_2x](https://gitlab.com/gitlab-org/gitlab/uploads/b5d64d1483bca3a6669ca20b9c9fda4c/CleanShot_20210628165018_2x.png) | This “ghost” appearance reminds me of an issue I started working long ago https://gitlab.com/gitlab-org/gitlab-design/-/issues/82#proposal: > Less than 1s: no progress indicator, changes appear instantly or faux-instantly (to learn more, read [this](https://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed) and [this](https://medium.com/ui-collection/the-psychological-speed-of-mobile-interfaces-df25276295dd))
issue