Switch component: Recommended loading state?

[waijeeho]

Hey there Paste team, I was wondering if you had recommendations for how to handle the loading state for a switch component.

I've previously:
(a) implemented the switch in its disabled state until the UI gets response to the state change request
(b) also explored (and abandoned) replacing the switch component for a spinner and help text in this state

Not sure that either solution is more clear or accessible than the other, or whether there are other options I've overlooked, so I'd love to hear any recommendations if you have any! Thanks.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Page level loading (updated: 06/04/2021, similarity score: 87%)
• Toggle Switch - Answer (updated: 08/25/2022, similarity score: 86%)
• Guidance on using progress bar vs. skeleton loader (updated: 10/27/2023, similarity score: 86%)

[waijeeho]

Thanks @TheSisb - Yep, @AnudeepChPaul and I have some existing implementation we make our designs consistent with.

Still curious what you think, so here are some links to a set of designs for one use of the switch:

• Switch in context of the page
• Different switch stats

[TheSisb]

Thank you for the Figma links, that helps a lot to visualize the problem. In this instance, I don't think disabling is the right approach as it can confuse the user as they might think they did something wrong. Whenever you encounter a situation like this, where you need to wait for a network request to complete, you may want to consider optimistically rendering. This is a React docs link, but that hook doesn't exist in React yet. Whatever tool you are using to perform these network requests should have this functionality built in, in most cases. If the request takes a long time (>5s) you may want to message it differently and change the UI to a button with an explanation that this isn't an instant action. Switches are best used for instant actions.

[waijeeho]

Thanks for taking a look @TheSisb - I think its reasonable feedback that disabling the switch while waiting for a response may be confusing / unclear to users. This will likely be the handling we go with to start, but as we await feedback from users, I'd like to talk with the wider group of designers / engineers to see if there's better handling we can explore and apply across switches in our product's console experience.

The designs we're working on will usually take less than 5 sec where we use the switch, so I think in our cases, the switch actions do fall under the 'instant' action bucket. There's still some downtime even within a 5 sec range, so we wanted to make sure users can't continue changing state and know the request is pending.

By saying we'd want to optimistically render, are you recommending you mean we'd change the state to the user's desired state, and still show that it was still in progress of completing?

[TheSisb]

Optimistic rendering is a technique in UI design where, upon user action, the interface assumes success without waiting for confirmation from the server. It immediately displays the expected outcome, providing users with instant feedback. If the server confirms success, all remains as expected; if not, the UI updates accordingly.

In your case, the toggle just flips over with no extra treatment. If the server replies success, do nothing. If the server replies an error, undo the toggle and - for example - display an error toast.

[roxanagomez]

Hi @waijeeho - let me know if the answer above helped or if there's anything else we can help you with.