Entity-filter card causes all dashboard cards with modified colors (using card-mod) to flicker after the HA update."

RobusX commented 3 days ago

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.
[X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

After updating from 2024.6.4 to 2024.9.3, all dashboard cards with modified colors or hidden buttons are flickering (colors and hidden buttons blink) when an entity-filter card with color-changing mode is also present on the dashboard. The issue cannot be reproduced in safe mode, as no cards are displayed. Flickering appeared with Firefox, Google Chrome and also within latest HA Android Companion app. Slider button on the right browser side also blinks. If the dashboard displays cards in the bottom part, browser due to flickering issue moves to the upper dashboard side, where the right slider also blinks. As was discovered, issue disappears when entity-filter card is removed from the dashboard. Problem is very annoying, please solve it.

Describe the behavior you expected

The problematic blinking rhythm of other cards and their flashing colors /hidden buttons with card-mod is determined by two pairs of two blinking lights within the entity-filter card. These four lights blink red when the alarm is armed, with a brief pause of a few seconds before both blinking red again. When 4 lights are blinking, the displayed entitiy-filter card is streched and when there are only two or less lights blinked, it is contracted back. The color-blinking behavior is not implemented in the dashboard code itself, but within separate automation. However, when in dashboard edit mode, the flickering ceases, and everything appears normal. If I remove the entity-filter card from the dashboard, situation is much better (only one right up-down cursor flicker when alarm armed), but not completely as was in 2024.6.4,

Steps to reproduce the issue

Alarm Armed, lights 1-4 in the entity-filter card are blinking red, card size is determined of active lights (OK)
All other cards with "card-mod" changed colors /hidden buttons are flickering (NOK)
Also slider button up-down on the right browser side flickers in the same rhythm (NOK). ...

What version of Home Assistant Core has the issue?

2024.9.3

What was the last working version of Home Assistant Core?

2024.6.4

In which browser are you experiencing the issue with?

Google Chrome 129.0.6668.58 , Mozila Firefox 115.15.0esr, Last Companinon app

Which operating system are you using to run this browser?

WIndows 10, Android (for Companion app)

State of relevant entities

No response

Problem-relevant frontend configuration

The "Entity-filter card" below includes blinking lights (Aq1 and Aq2) that blink in a synchronized pattern, while the bulbs (K1 and K2) blink in a separate rhythm (this is all OK and worked in the 2024.6.4 without other cards flickering ):

type: entity-filter
title: Lights/Sensors ON
show_header_toggle: false
entities:
  - entity: light.aqara_hub_m1s_52a7_lightbulb
    name: Aq1
    tap_action:
      action: toggle
  - entity: light.aqara_hub_m1s_61d3_lightbulb
    name: Aq2
    tap_action:
      action: toggle
  - entity: light.boblight
    name: BobL
    tap_action:
      action: toggle
  - entity: light.philips_hue_bulb1_cabinet
    name: Cab1L
    tap_action:
      action: toggle
  - entity: light.philips_hue_bulb2_cabinet
    name: Cab2L
    tap_action:
      action: toggle
  - entity: light.corridor_bulb1
    name: Corr1L
    tap_action:
      action: toggle
  - entity: light.corridor_bulb2
    name: Corr2L
    tap_action:
      action: toggle
  - entity: light.kurilbulb1
    name: K1
    tap_action:
      action: toggle
  - entity: light.kurilbulb2
    name: K2
    tap_action:
      action: toggle
  - entity: binary_sensor.aqara_motion_sensor_p1_corridor_occupancy
    name: AppMtn
    tap_action:
      action: none
  - entity: binary_sensor.contact_sensor
    name: MainDoor
    tap_action:
      action: none
  - entity: binary_sensor.contact_sensor_2
    name: ClrDoor
    tap_action:
      action: none
  - entity: binary_sensor.contact_sensor_3
    name: AppDoor
    tap_action:
      action: none
state_filter:
  - 'on'
  - open
  - detected
  - operator: '>'
    value: 4
show_empty: false
sort:
  method: domain
card:
  type: glance
  title: ' '

Three Blinking cards code examples from the dashboard which should not blink:

1. Here an "Alarm Plugs-Siren" icon flickers in red (near is custom:fold-entity-row card with card-mod code with modified red color) - NOK:;

type: entities
entities:
  - type: custom:template-entity-row
    name: ALARM STATUS
    icon: mdi:security
    state: '{{ ''Armed'' if is_state(''switch.alarm_plus'', ''on'') else ''Disarmed'' }}'
    secondary: Time is {{states('sensor.time')}}
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.alarm_plus
    hold_action:
      action: more-info
    card_mod:
      style: |
        :host {
          --mdc-icon-size: 26px;  
          --text-color: #000000; /* Default text color */
          --card-mod-icon-color: {% if is_state('switch.alarm_plus', 'on') %} red {% else %} green {% endif %};
        }
        .state {
          color: var(--text-color);
          font-size: 18px; /* Set font size for both texts */
        }
        {% if is_state('switch.alarm_plus', 'on') %}
          .state {
            color: #FF0000; /* Bright Red for Armed */
          }
        {% else %}
          .state {
            color: #00FF00; /* Bright Green for Disarmed */
          }
        {% endif %}
  - type: custom:template-entity-row
    entity: switch.alarm_socket
    icon: mdi:toggle-switch-variant
    name: Alarm Socket
    toggle: true
    state_color: true
    secondary: |
      Power: {{ states('sensor.alarm_socket_power') }} W                
  - type: custom:fold-entity-row
    head:
      entity: switch.alarm_group_plugs
      name: Alarm Plugs-Siren
      icon: mdi:alarm-light
      toggle: true
      state_color: true
      style: |
        :host {
          --mdc-icon-size: 26px;
          --card-mod-icon-color:
          {% if is_state('switch.alarm_plus', 'on') or is_state('switch.alarm_siren_switch', 'on') %}
            red
          {% else %}
            green
          {% endif %};
        }
    entities:
      - entity: switch.alarm_plus
        name: Alarm Plus
        icon: mdi:alarm-multiple
        secondary_info: last-changed
      - type: custom:template-entity-row
        entity: switch.alarm_plug
        name: Alarm Plug
        icon: mdi:alarm-bell
        toggle: true
        state_color: true
        secondary: |
          Power: {{ states('sensor.alarm_plug_power') }} W                
      - type: custom:template-entity-row
        entity: switch.alarm_siren_switch
        name: Alarm Siren
        icon: mdi:turbine
        toggle: true
        state_color: true
        secondary: >
          Power: {{ states('sensor.alarm_siren_switch_power') }}
          W                
title: false
state_color: true
show_header_toggle: false

2. Here a hidden slider on-off button near "Main Door" on the rights side appears again and disappears - flickers with the blinking rhythm (button hidden with card-mod) - NOK:

  - type: custom:fold-entity-row
    head:
      entity: switch.shelly_main_door_12v_switch_0
      name: Main Door
      toggle: false
      state_color: true
      card_mod:
        style: |
          :host {
            --card-mod-icon-color: 
            {% if is_state(config.entity, 'on') %}
              orange;
            {% else %}
              grey;
            {% endif %};
          }
          .entities .state-card-toggle .state-card {
            display: none !important;
          }
          ha-entity-toggle {
            display: none !important;
          }
    entities:
      - type: custom:template-entity-row
        entity: switch.shelly_main_door_12v_switch_0
        name: Main Door 12V Switch
        tap_action:
          action: toggle
        toggle: true
        secondary_info: last-updated
        secondary: >
          Last: {{
          states.switch.shelly_main_door_12v_switch_0.last_updated.astimezone().strftime('%m-%d
          %H:%M:%S') }}
      - type: custom:template-entity-row
        entity: switch.2pm_main_door_switch_1
        name: Main Door 230V Supply
        tap_action:
          action: toggle
        toggle: true
        secondary_info: last-updated
        secondary: >
          Power: {{ states('sensor.2pm_main_door_switch_1_power') }} W |  Last:
          {{
          states.switch.shelly_main_door_12v_switch_0.last_updated.astimezone().strftime('%m-%d
          %H:%M:%S') }} 
title: ''
state_color: true
show_header_toggle: false

3. Here all three door icons are flickering (NOK):

type: entities
title: ' '
show_header_toggle: false
state_color: true
entities:
  - type: custom:template-entity-row
    entity: binary_sensor.contact_sensor
    name: Main Door
    icon: mdi:door
    style: |
      :host {
        --mdc-icon-size: 30px;
        --card-mod-icon-color: 
          {% if is_state(config.entity, 'on') %}
            red
          {% elif is_state(config.entity, 'unavailable') or is_state(config.entity, 'unknown') %}
            yellow
          {% else %}
            green
          {% endif %};
      }
    secondary: |
      {% if is_state(config.entity, 'on') %}
        Door Open
      {% elif is_state(config.entity, 'off') %}
        Door Closed
      {% elif is_state(config.entity, 'unavailable') %}
        Sensor Unavailable
      {% elif is_state(config.entity, 'unknown') %}
        Sensor State Unknown
      {% endif %}
  - type: custom:template-entity-row
    entity: binary_sensor.contact_sensor_3
    name: App Door
    icon: mdi:door
    style: |
      :host {
        --mdc-icon-size: 30px;
        --card-mod-icon-color: 
          {% if is_state(config.entity, 'on') %}
            red
          {% elif is_state(config.entity, 'unavailable') or is_state(config.entity, 'unknown') %}
            yellow
          {% else %}
            green
          {% endif %};
      }
    secondary: |
      {% if is_state(config.entity, 'on') %}
        Door Open
      {% elif is_state(config.entity, 'off') %}
        Door Closed
      {% elif is_state(config.entity, 'unavailable') %}
        Sensor Unavailable
      {% elif is_state(config.entity, 'unknown') %}
        Sensor State Unknown
      {% endif %}
  - type: custom:template-entity-row
    entity: binary_sensor.contact_sensor_2
    name: Cellar Door
    icon: mdi:door
    style: |
      :host {
        --mdc-icon-size: 30px;
        --card-mod-icon-color: 
          {% if is_state(config.entity, 'on') %}
            red
          {% elif is_state(config.entity, 'unavailable') or is_state(config.entity, 'unknown') %}
            yellow
          {% else %}
            green
          {% endif %};
      }
    secondary: |
      {% if is_state(config.entity, 'on') %}
        Door Open
      {% elif is_state(config.entity, 'off') %}
        Door Closed
      {% elif is_state(config.entity, 'unavailable') %}
        Sensor Unavailable
      {% elif is_state(config.entity, 'unknown') %}
        Sensor State Unknown
      {% endif %}

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

pickonedev commented 1 day ago

For me, there is something different. If I use entity-filter and I push a button which will make the entity appear by the entity-filter, it will flicker all the dashboard once. And this is doing everytime when entity-filter is showing/hidding something

I am thinking to use conditional card, but it is way more date to write instead of entity-filter

RobusX commented 1 day ago

Yes, your situation is very similar to mine. If you push the button multiple times, it flickers constantly with every press.

No, using a different card instead of the entity-filter is not a solution. This problem should be resolved permanently, as there were no issues in version 2024.6.4, and probably also in the first later release (which I did not install due to other issues in those versions). Maybe you can confirm which version worked still ok ?

By the way, the entity-filter is an official Home Assistant dashboard card and not something installed via HACS, as you can see from this link: https://www.home-assistant.io/dashboards/entity-filter/

This means it should work reliably; otherwise, it should be completely removed from the Home Assistant page and deprecated. That would be unfortunate, given its convenience and practicality.

pickonedev commented 1 day ago

Yes, I know, this should be solved. I was not very optimistic in waiting a solution to this issue, this is why I ran into using a different card. I really hope that this will be solved, it is very annoying. And it is even MORE annoying when you use an old, slow performance, tablet... When it is doing that "filcker", it is reloading some css, which make it very slow, on a slow device... Sooo... a refresh will kill some time in order to readjust the dashboard

I see that the BOT of the posts, did not listed any owner for this issue... In order to get some help... Still, hope that someone will look at this and take into consideration.

home-assistant / frontend