card-mod-themes: using jinjia causes flickering

[ildar170975]

My Home Assistant version: 2021.12.9 card-mod 3.1.1

My lovelace configuration method (GUI or yaml): storage/yaml

What I am doing: Applying a card-mod-theme for glance element.

What I expected to happen: Style is working stable.

What happened instead: The card's contents is flickering.

Minimal steps to reproduce:

1. Create a Glance card:

   type: glance
   entities:
   - entity: sun.sun
   - entity: zone.home
   - entity: binary_sensor.updater
   - entity: device_tracker.apple_watch_s4

   The card must contain an entity whose attributes may change - I use a device_tracker (ASUSWRT integration) which may be always home or not_home but has a changing attribute last_time_reachable.

2. See that the card is displayed stable:

3. Add a card-mod style to the card:

   card_mod:
   style:
   .entities .entity:
     $: |
       state-badge {
         margin-top: 0px;
         margin-bottom: 0px;
       }
     .: |
       .entity {
         margin-top: 12px !important;
         margin-bottom: 12px !important;
       }

4. See that the card is displayed stable, the style is applied:

5. Remove the added card-mod style from the card.

6. Add a card-mod-theme:

   card-mod-glance: |
   :host {
     margin: 12px 0px 12px 0px !important;
   }
   state-badge {
     {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
     animation: spin 3s infinite linear;
     {% endif %}
     margin-top: 0px;
     margin-bottom: 0px;
   }
   @keyframes spin {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(359deg);
     }
   }

7. Activate this theme.

8. See that the card is flickering sometimes (at least 1..2 times a minute), the style is applied (check the gif below):

I guess that the flickering occurs when some entity is changed internally (here - device_tracker).

Error messages from the browser console: none

By putting an X in the boxes ([x]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Probably related to https://github.com/thomasloven/lovelace-card-mod/issues/165

[thomasloven]

This should be better now.

[ildar170975]

Unfortunately, the flickering still present. May be a bit less but still there. Since states for these entities on the card are not changing (only attributes may change - like for that device_tracker entity) - I wonder why the card is redrawing itself?

Let's check this card:

type: glance
entities:
  - entity: sensor.cleargrass_1_pm25

The sensor.cleargrass_1_pm25 sensor is updated and may be changed every 30 sec. I see that the card redraws itself when the state is changed (i.e. the card "flickers"). But the previous card does not contain changing sensors....

[ildar170975]

HA 2022.6.4, card-mod 3.1.5 - do not see the flickering! Even with a frequently changing entity. Probably was solved in 3.1.3 .. 3.1.5. Thank you, Thomas!