Button with progress indicator?

Configuration Frontend
1

I have a set of buttons in my dashboard that control certain iAquaLink devices (my pool equipment). Because they are interacting with a very slow cloud service, when a button is pressed it often takes several seconds to see a state change in the UI, with no indication that it is “working”. Furthermore, because of this issue, users typically end up pressing the same button multiple times because it’s unclear if their first attempt worked.

Is it possible to add some sort of spinner or progress indicator to buttons to show that the tap was registered AND that it’s working? Ideally I’d like the spinner to go away when either the state finally changes OR due to some configurable timeout. In addition, while the progress indicator is present, I’d like further taps to be blocked/ignored.

I’m doing all my dashboard UI via YAML right now, so I have some flexibility. I also have HACS installed if there’s a viable solution there for this. Guidance is appreciated! Thank you in advance.

2

If you’re using mobile devices, you can enable haptic feedback on the button so you know it was pressed.

Someone else may have a better idea, but that’s the first thing that comes to my mind.

3

If you use custom:button-card you can set the icon based on an input_boolean.

You can then have an automation that triggers the input_boolean to on when the button is pressed and to off when the state changes. It will react immediately as it is not relying on anything external.

4

You could use helper button and do in automation the action with real button/switch that take times to receive the feedback. You control everything into this automation to revert the switch in case of something happen.

Or check with this: (may be possible using conditional part)

5

I think an example of this is needed; I tried doing this on my own based on the bit of information you provided but it’s not enough. Also I don’t like the idea of having to create an input boolean for every single button (I have several).

I do like the idea of using button-card, though. I feel like it should be able to do this with custom_fields and maybe styles, but it’s all too configurable and thus confusing, and I’m not sure how to get the effect I’m looking for. I did figure out how to rotate the button icon, but that’s not what I want to do (I’d rather see a spinner overlay on top of the button but the button’s icon left alone).

6

The problem is, the button can only respond to states and (I don’t think) there is a built-in state called "I’ve been triggered but the thing I’m supposed to do hasn’t happened yet).

The only other thing that could easily be done is to make the colour change whilst the button is actually being clicked more obvious and is referenced here in the custom:button-card docs.

If you provide the actual button yaml you are currently using, I’d be happy to convert it to both examples (better click colour / using an input_boolean) although, as you wrote, the input_boolean is a lot of hassle if there are a lot of buttons requiring it.

1 Like