Switch (row) needs a way to convey an "in-progress" changing status

[brtbrt]

Goal

Row with switch role could have a way to set the row in disabled-in-progress state, so as to wait for state changes that imply I/O delayed communication.
If this can be visually accomplished by replacing switch with a right property having a spinner, this is not true and desirable for ATs, where a disappearing switch button could mislead the user.

Context

switch row, and switch in general, work generally fine, except when it comes to transitioning from on->off or off->on, and the changing status could trigger an operation (i.e. sending requests to the back) that takes time.

Although this is UX unfriendly, and the changing status should be performed in the background by following optimistic UI, it's very common getting into cases where you should really wait for a change to accomplish. You could get into this very easily in novum apps, where optimistic UI is not common.

Because of that, we usually override the switch ptop with a right=(<Spinner />), which is visually fine, but not so a11y friendly. A video showing this on real use case scenario (start watching at 00:50):

ScreenRecording_06-26-2025.17-58-01_1.MP4

This is not desirable, because the switch role completely disappears from the accessibility tree, when what we want is still there, disabled, visually hidden but available for ATs. Plus we want the component describing that the operation is in progress.

Impact

A sturdy, standardized option for this could avoid naive implementations and clumsy workaround, conveying a better UX to visual impairment users.
Since the solution could be easily used with less code, it would also help avoiding bugs on the interface.

Discussion Questions

• It can be improved by letting it pass a message that the ATs could read when the state changes?

Additional considerations

I have a working proof of concept on this branch, if it could be a good starting point: Telefonica/mistica-web#1404

I've accomplished it by letting the Row's disabled property to be true|false|'busy

Do you have a visual proposal?

https://mistica-mwc2fw2yb-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8BbAhgSwHYD4A6WABIUgEowDOADhFhRgG4wAyaAnhAK4Au%2BRxJACoZuAGxgBmQmgoBePCAAWARgU4AIjBQQkAemFjJfASQByMAOZpujGACEIAD2MmSpCAHdmGCrwKuBMk9-AIEKDxEwRVlgYBDQgSw0FBh4QgVVEAAaeITCBjRRTlTCCxhuAGVuaxgACgyFLMIAM0KKGABKHP48wloAYUU0LDK02o7CWRxCOJ7ewnbK6u46huzS8qqa%2BpBMptbRdo6OgG5chIBfbt6Li-PXG0N5XYV7kygfNAAjcShnr84FDYrzmJl0LgCQQ8bzCEW4URis3mhCSKTSCgATI0YSYCkUSmUlts1k1uAAnYpdHECAZDEYlcaTaZI5ELTbLVYgLHrQlbFY7bn7NqdU7U4hXam3amPcTPbnUj4Ub6-GHgmFQ6nhSLRWJilHJEoKCTY0GhPHFNK8jk7Y3rA5Ha7zWnDUaERlTGZ64iLPmc21NACEVuJIH9LWFxzOpoSPutRoAtIrlTAoI1COTKVGvYQIlgoJ4AHSLYQpLjcWru5nZ73skMSROfH4ptMKAFAhSi6OhK6EZQABgHneREq74ruo-TIllRpBvSTTb%2BwGD-IT85Vdoj44SatNencXh8fjmenMVhsTAczhCe8oNDotlYHB4fD06GwfGyIG4ii0lAQAG0QAAeQxAB9cwPFAjAgIqEAAF0shACIoG-CgAIkAA2Ps4IuIA

Telefonica/mistica-web#1404

[aweell]

Hi @brtbrt

This is something we already we have identified and has been reported as a need in other components in the system, and we agree that it needs to be solved from the system side.

#2151

We'll cover the row, and the rest of identified components in this issue

Thank you for opening a discussion ❤️

You can follow the progress in the open issue

[brtbrt]

great! let's update that issue with the proof of concept, so as to ease webcore guy's work :)