[EuiButtonIcon] Add isLoading prop to match EuiButton

[p-young]

This is a feature request to allow EuiButtonIcon to also have a loading state "isLoading" like EuiButton does.

The use case is for example a chat submit button, which needs to be put into a loading state after submission.

A workaround is to use EuiButton with an icon and manually change the margins to make it look like an EuiButtonIcon, but I think it would be nice to have EuiButtonIcon directly do it.

Thanks!

[elizabetdev]

Thanks, @p-young for opening this issue.

The use case sounds good and we are going to consider it.

I have one suggestion for your workaround. Instead of using a EuiButton with an icon, you can use instead a EuiLoadingSpinner: https://codesandbox.io/s/euibuttonicon-loading-0ffczp?file=/demo.js:378-395.

[elizabetdev]

To introduce a EuiButtonIcon isLoading state I can follow the other buttons isLoading state approach:

• The button gets disabled.
• The EuiIcon gets replaced with a EuiLoadingSpinner.
• We introduce a new size to EuiLoadingSpinner "XXL" so that all the sizes match the EuiIcon sizes.

But I have some a11y questions.

• When the button gets disabled the focus state is missed.
• It gets removed from the accessibility tree and is invisible to assistive technology users

So when the EuiButtonIcon isLoading would adding an aria-disabled instead of disabled be more appropriate (link)? Or is it OK to keep following the other buttons' pattern?

CC @1Copenut @cchaos

[1Copenut]

@miukimiu & @cchaos

I've been thinking about this for a bit. I think EuiButtonIcon isLoading state should have the same behavior as other buttons, for now. It could be more disruptive to have one button that handles the disabled state differently than others.

With that said, I think it would benefit us to review our disabled button pattern for all buttons and look at the effort to move to a button[aria-disbled="true"] model. I'll add a backlog research ticket to EUI to track that longer time horizon work.