Add loading indicator to dark mode toggle

[legrego]

We recently added an inline dark-mode toggle to the user avatar dropdown:

Persisting the user's theme preference can sometimes take several seconds, and during this time there is no visual indication that Kibana is "working on it".

We should add a visual indication that the operation is in progress.

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[legrego]

Hey @MichaelMarcialis, do you have any suggestions for how to best show a loading indicator here? The Switch component that we're using here doesn't offer a loading state, and we have concerns that switching the control out for a loading indicator would look janky.

[MichaelMarcialis]

Hey @MichaelMarcialis, do you have any suggestions for how to best show a loading indicator here? The Switch component that we're using here doesn't offer a loading state, and we have concerns that switching the control out for a loading indicator would look janky.

@legrego: Good question. The switch in general is problematic, as the theme setting in user profiles has three options, not two: space default, light, dark. Ideally, in the future, we will remove space-level controls for themes and replace the space default option with the user's OS or browser defaults. Either way, the switch component can't properly convey the fact that there are three options.

Also, we're currently using mixed nomenclature and iconography for the setting. Here it's labeled as "Dark mode" with a sun icon, while in the user profile settings we call it "Theme mode". Would it be better to keep these consistent?

Perhaps there's a better way we can present this, while also addressing the loading issue you mention. Here's some quick thoughts in a mockup.

I've included options for either a text-based or icon-based version, but ultimately the goal for both was to be more consistent with how we present these options to better match the user profile setting. It also visually differentiates itself better from the regular context menu items. For the loading state, we can use an animated EuiProgress component to show that something is happening after the user makes their theme selection. Thoughts?

[thomheymann]

@MichaelMarcialis What do you think the use case is for reverting to the "space default"? I appreciate that most platforms give a "system default" option but that is very different and not what "space default" is. System default means that an app can automatically adjust to the operating system (which might change its theme depending on the time of day) so I can see why a user would want to select that setting. From a user perspective "space default" simply means to use whichever theme an administrator set for that space. Keeping in mind that the user wouldn't even know what that theme is when selecting it it feels fairly edge case'y.

[MichaelMarcialis]

@MichaelMarcialis What do you think the use case is for reverting to the "space default"? I appreciate that most platforms give a "system default" option but that is very different and not what "space default" is. System default means that an app can automatically adjust to the operating system (which might change its theme depending on the time of day) so I can see why a user would want to select that setting. From a user perspective "space default" simply means to use whichever theme an administrator set for that space. Keeping in mind that the user wouldn't even know what that theme is when selecting it it feels fairly edge case'y.

Honestly speaking, I don't think there is a particularly good use case for the "Space default" option. The only reason I'm including it here is because it's technically an option we currently offer in user profile and advanced settings. And because we do offer it, omitting the option (as in the switch scenario) raises some UX questions and sharp corners. With a switch that only shows options for light/dark mode, how does a user know if/when they are using space default? If they do switch away from space defaults, how would they get back to using space defaults if they change their mind?

As I mentioned previously, ideally we simply would remove the theme mode selection from space advance settings altogether and replace it with a browser/OS default option. And in that case, I think the UI I mocked up above still applies. Dark/light mode is a user-level decision and really has no place as a space-level setting.

[thomheymann]

If they do switch away from space defaults, how would they get back to using space defaults if they change their mind?

I think that's what I was trying to get at. I'm not sure this is something we need to solve in such a prominent location.

I think it's a fairly common approach to simplify available options to the most common use cases in a global navigation.

In terms of the designs I really like the treatment but I'm not sure if there's a suitable icon for "space default". I don't think "Default" is clear enough since it can be easily confused with system default which is the more commonly known setting in this context.

[legrego]

Core may soon have support for respecting the OS preference for light/dark mode via #173044. We should aim to support this for user profiles soon as well (#155945), so we don't have a feature gap between the two methods of configuring a theme.

So even if we ignore the Space Default option, it seems that we'll end up with a three-state selection after all (System, Light, Dark). I'm open to other design ideas, however.

[MichaelMarcialis]

Core may soon have support for respecting the OS preference for light/dark mode via #173044. We should aim to support this for user profiles soon as well (#155945), so we don't have a feature gap between the two methods of configuring a theme.

So even if we ignore the Space Default option, it seems that we'll end up with a three-state selection after all (System, Light, Dark). I'm open to other design ideas, however.

That's excellent news! I would personally love offering the user only those three options (system, light, dark) everywhere (both in the user dropdown and user settings page), and removing space-level control over theme mode selection altogether.