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 |
|-----------------------|----------------|
|  |  |
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