Designs and a11y criteria for buttons/toggles loading state

[MisRob]

We need to come up with a design pattern for when an action is triggered by a button or a toggle (and possibly if we can think of some other elements?) and we need to indicate that an action is happening and somehow disable the element that triggered it. This would also ideally be part of KDS documentation guidance. Depending on a design, we may need to implement new states. Few related notes:

• Note that in Kolibri's context, we can't really know how long an server response is going to take.

• By @rtibbles

  ...just flagging that I noticed while repeatedly using the setup wizard that we don't have a standard way of handling 'submit' buttons that then have to wait for a server response. I think in some cases we disable the button while we wait for the response to prevent double clicks (we've had to do this in some places on Studio as well), but would be good to have a standard pattern for handling this to prevent eager users/fat thumbs from double submitting. Maybe some additional guidance in KDS might not be amiss?

• Some questions

  • Should an element used to trigger an action be disabled?
  • Should it show a loader instead?
  • How about a11y?

• Relatedly, you can see recordings here https://github.com/learningequality/kolibri/pull/11201 where I experienced a bit with toggle loading states, however I'm not sure if this is something to be adopted widely.

[MisRob]

@jtamiace @tomiwaoLE @radinamatic @rtibbles

[nucleogenesis]

Notes from KDS meeting: @tomiwaoLE will review this when time allows. Overall, this is a "needs decisions" issue that we can work out when time allows