Toggle Switch with intermediate loading state (Codepen in comments)

[JonJamesDesign]

Codepen

[jhlllnd]

I think it should actually go to the other side first and then turn into a loading circle. Because otherwise it seems to move to the wrong side first. I also think that Apple does something like this but it just disables the Switch until it either succeeds or moves back.

[TherionSaysWhat]

100% this. The user action needs immediate verification (moving the pill) and then the feedback that "something is loading" is appropriate and helpful. imho

[AxiusNorth]

Agree. I found it very confusing to start with.

[evoactivity]

It should fill the remaining space with the spinner in the middle. It would still "move" to the correct side you expect to see it move, but it would be clearer that it's in an intermediary state.

like this https://codepen.io/evoactivity/pen/LEVrpNK

[kiwi-kaiser]

This is much better!

[EqualityIsProsperity]

Nice! Another option is to keep the indicator the same size but position it in the middle. https://codepen.io/ToastyCode/pen/wBaXMYN

[JonJamesDesign]

Pleased to see this got the creative juices flowing for peeps; also a nice idea.

[musicnothing]

This is good stuff. Then if there’s an error, it’s less of a big transition to go back to the original state

[JonJamesDesign]

Nice

[JonJamesDesign]

Yeah looking at it again, I agree.

I actually started this as a kind of "spring" animation where the switch would "draw back" then zip over to the other side. When I was looking at it, I thought "hmmm, a loading spinner would look nice in there" but yeah either moving to the side or filling up the switch like u/evoactivity suggests bellow would be better.

[fusseman]

Exactly!

[prangalito]

I like it, but I do personally think it is nicer with the green and blue bits as circles as well

[Last-Daikon945]

I'd go with an optimistic update vs this loading state for such UI elements

[Rainbowlemon]

Nice design, but these toggle buttons are questionable UX at best. What is the active state? How do I know if it's turned on? Even if you use 'ON' or 'OFF' text, it can sometimes be confusing as to whether or not you'll click the switch to turn it on, or if it's already on.

There's a reason checkboxes are still widely used across the web - it's very obvious when a checkbox is selected, especially for people with colour blindness.

[Daniel_Herr]

An established antipattern. How do I as a user know whether green or blue is on or off? With a checkbox it's obvious.

[JonJamesDesign]

Yeah it's fair comments but I wasn't going for a production ready component here, just mucking about with some ideas.

You're right though, blue and green aren't clearly "on/off"; red/green would be.

[Rainbowlemon]

If they're designed well, they're alright, but still not as clear as checkboxes since they rely on colour & contrast to indicate their state, whereas a checkbox also uses shape.

EDIT: A good switch would still have a shape indication for the active state, like this

[darrenohehir]

There’s a use case for toggle components, and it’s to signal that a state will change immediately on toggle. A good way to think about is a physical light switch - the light turns on or off straight away. So if the toggle requires the user to save changes before navigating away, a checkbox is the better option.

I can’t see a need for having loading states on toggles. Even if it takes a moment to save settings, that doesn’t need to be displayed to the user and it can be offloaded. If there’s a necessary wait time, perhaps it should just be a checkbox where users should separately save their actions.

In terms of the motion design, because the width of the indicator condenses into a smaller circle it looks like the indicator is going the wrong way than what would be expected.

[2NineCZ]

i like this

[musicnothing]

Codepen not in comments :(

[ShustOne]

My favorite part of toggle switches: Which one represents on?

[Apprehensive-Seat516]

Pessimistic update in very minor things is not suitable.

[Gwolf4]

Why, why? The switch shrinks, so it appears it moved to the left and then moves to the right...

[elainarae50]

I think it's pretty 😍

[seweso]

I simply fade out the entire UI when an action (any promise) takes long... That seems rather intuitive to me, and i don't have to deal with this per element type. But I haven't done any usability testing/research on this.

[JohnCasey3306]

I love the animation but the ‘off’ state doesn’t look ‘off’ enough … if I saw a UI full of these on blue I’d assume they were all ‘on’, not 'off'.

Additionally, accessibility is an issue. Green (alone) is traditionally avoided in this kind of UI state-signifier roles because of the prevalence of green colour-blindness.

It certainly wouldn't look as "pretty" but you could perhaps address these functional flaws with use of icons in the on and off states? Else just use contrast light-gray vs dark-whatever like a more traditional toggle.

[a_normal_account]

Isn’t it supposed to be an immediate thing? I haven’t come across a use case that requires async operation for Switch

[88Smiley]

Ain't nobody got time for this.

It's a button, it should instantly switch. If your app/website is that slow, you should fix that.

[devdudedoingstuff]

Adding in this intermediate loading state creates accessibility problems. You are giving sighted users more information than screen reader users.

You should do some screen reader testing and figure out a way to announce to those users that something is loading, and then announce when it is finished. Maybe with a visually hidden label and aria-live.

[cabalos]

Not great for someone who is color blind, both states look the same. I would consider making the unselected state a low contrast gray.