Loader states
TheGooner93 opened this issue · 6 comments
Hi, this is great work.
I think it would be a great idea to also incorporate a isLoading prop to control any loading states? Wdyt @anatoliygatt ?
Hi @TheGooner93. Thank you, glad you liked it!
I'm not sure what it's actually for, nor have I ever seen this pattern being used in any of the libraries that are implementing form inputs (including toggle switch).
I can see two possible use cases where isLoading might be useful, but we can easily overcome it with the already existing attributes and best practices:
- If you want to make a toggle switch's state immutable while submitting a form, you can use a
disabledor anaria-disabledattribute for this very purpose. - If you want to load a form's state from an API, you shouldn't display a form in an unknown state in the first place. Use some sort of a loading spinner and then render the whole form whenever its state will become available.
Let me know what you think!
Yeah what I'm thinking of is your point regarding integration with an API. Suppose toggling this switch is not being used as part of a form, but as a standalone input to perform an action ( for eg. adding a product to a wishlist in an ecommerce website) then a loading state would be sensible.
The loading state within the input(as opposed to an entire page loading) would be definitely optional and nice to have. Feels like better UX too imo
I see. In this case, I would use another best practice, optimistic UI. Think of a "Like" button on Twitter, when you click on it, it will animate immediately and then if something goes wrong, it will just restore itself to the original state and show some sort of toast with an error message.
Yes exactly. I do have a PR ready for this. I will update once I fix the snapshot tests.
Well, PR is unnecessary here. When implementing optimistic UI you can, for example, set checked to true immediately and then set it back to false if an error is returned from an API.
Ah I see what you mean. Lets close this issue then