Button with delayed status update

Configuration Frontend
1

Hi!
I have a template switch where the status takes a few seconds to update. When I click the button on the front end to toggle the switch, it appears as if either nothing happens, or the switch toggles and then resets to the original position.

Users end up clicking the button several times because they don’t know if the switch has worked or not.

Is there a way to “disable” a button or switch on the front end until a given event/trigger?

Thanks!

2

What sort of switch (what platform)?

3

I’m using Wemo switches. I’m also new to Home Assistant, so forgive me if I’m covering old ground here or missing something!

You can see the behavior in this attached gif. It’s a template switch that I click the button, it briefly changes to the “on” icon after the click, then reverts to “off” icon until the status update happens.

yaml below:

    livingroom_ac_switch:
      value_template: "{{ is_state('switch.livingroom_ac', 'on') }}"
      turn_on:
        service: switch.turn_on
        data:
          entity_id: switch.livingroom_ac
      turn_off:
        service: switch.turn_off
        data:
          entity_id: switch.livingroom_ac
      icon_template: >-
        {% if is_state('switch.livingroom_ac', 'on') %}
            mdi:power-plug
        {% else %}
            mdi:power-plug-off
        {% endif %}

Ideally, I would like to be able to have a button be “disabled” until its state is known, or an event happens.

So in yaml, if this were implemented, it might look like this:

switch_name:
  value_template: "{{ is_state('switch.livingroom_ac', 'on') }}"
  disable:
    after_toggle:
      entity_id: switch.livingroom_ac
      # The below is out of my depth. Maybe "change"? don't know.
      event_type: update 
      icon: mdi:sync

It’s the same user experience and functionality that is used to prevent double (or more!) submission of html forms with javascript:

https://www.the-art-of-web.com/javascript/doublesubmit/

Given the async nature of HA, I think having a “disable until event” for interactive UI elements would much better expose the underlying state to users.

Thanks!
small

4

Can you explain what you are trying to accomplish by defining a template switch from a switch?

It seems rather redundant.

When you toggle switch.livingroom_ac how long does it take to update the switch state?

I had a look at the integration page (I am not familiar with Wemo) and it is one of the few integrations that does not indicate its IoT class, i.e. if this is a cloud or local service.

5

Yes, the template switch is redundant, however, I wanted the icon to display the state of the switch, not just the colors. i.e.: mdi:power-plug-off vs mdi:power-plug.

A plain switch only has a single icon and the icon only changes colors when it’s state changes, not the icon itself, so I used a template switch.

If there is a better way to change the icon to display state, I would love to know how! I thought about having a horizontal stack in lovelace, with two cards, where each card was displayed conditionally dependent on the state, and where the button icon was different for each card. Seemed awkward.

Wemo is, I believe, a local service.

6

You could try templating the Lovelace icon directly.

7

Thanks!

I think you answered this question on the same thread over here:

So I’m adding it to this thread for future readers.

I’m new to this, so I really appreciate your help!