Erratic flickering when a monitored entity is customized by Custom UI

[ildar170975]

Checklist:

• [ x] I updated to the latest version available
• [x ] I cleared the cache of my browser

Release with the issue: 1.3.6

Last working release (if known):

Browser and Operating System: Chrome 112.0.5615.50 (same with FF), Win10

Description of problem:

Consider this card:

type: custom:config-template-card
entities:
  - input_number.test_level_2
card:
  type: history-graph
  entities:
    - sun.sun

where the monitored entity is customized by Custom UI:

homeassistant:
  customize:
    input_number.test_level_2:
      templates:
        icon_color: >-
          if (state <= 10) return 'yellow';
          else
          if (state <= 20) return 'brown';
          else
          if (state <= 30) return 'magenta';
          else
          if (state <= 40) return 'lightblue';
          else
          if (state <= 50) return 'green';
          else
          if (state <= 60) return 'orange';
          else
          if (state <= 70) return 'purple';
          else
          if (state <= 80) return 'red';
          else
          if (state <= 90) return 'gold';
          else
          return 'cyan';

Although the monitored entity is NOT changing - the whole card is flickering. Same behaviour is observed with HA 2023.4.0 & different test setup (HA 2022.8.x, none of custom card were updated since that time).

Here is what this entity consists of: Even when a state & all attributes are static, the entity seems to be "changing" - and the only possible "changing" part of it may be that "template" attribute added by Custom UI.

Earlier I registered an issue in Custom UI repo but it was closed w/o explanation - https://github.com/Mariusthvdb/custom-ui/issues/59. Is it possible to correct the config-template-card to ignore these "changing template"?

Javascript errors shown in the web inspector (if applicable):

Additional information:

[ildar170975]

Recent changes either in 2023.9.x or in Custom UI added a possibiliy to define attributes driven by Custom UI inside a template sensor: https://github.com/Mariusthvdb/custom-ui/blob/master/EXAMPLES.md#however-experimental-recently-discovered

For the sake of experiment I tried to add an icon_color attribute, and used a regular Jinja template (it was after all in a entity) on that attribute. To my surprise this works perfectly

The example from the 1st post may be presented as:

input_number:
  test_level_2:
    ...

template:
  - sensor:
      - name: test_level_2
        state:
          {{ states('input_number.test_level_2') }}
        attributes:
          icon_color:
            {% set STATE = this.state|float(default=0) -%}
            {%- if STATE <= 10 -%}
              {%- set COLOR = 'yellow' -%}
            {%- elif STATE <= 20 -%}
              {%- set COLOR = 'brown' -%}
            {%- elif STATE <= 30 -%}
              {%- set COLOR = 'magenta' -%}
            {%- elif STATE <= 40 -%}
              {%- set COLOR = 'lightblue' -%}
            {%- elif STATE <= 50 -%}
              {%- set COLOR = 'green' -%}
            {%- elif STATE <= 60 -%}
              {%- set COLOR = 'orange' -%}
            {%- elif STATE <= 70 -%}
              {%- set COLOR = 'purple' -%}
            {%- elif STATE <= 80 -%}
              {%- set COLOR = 'red' -%}
            {%- elif STATE <= 90 -%}
              {%- set COLOR = 'gold' -%}
            {%- else -%}  
              {%- set COLOR = 'cyan' -%}
            {%- endif -%}
            {{COLOR}}

and this code has NO flickering:

type: custom:config-template-card
entities:
  - sensor.test_level_2
card:
  type: history-graph
  entities:
    - sun.sun

So, if defining the icon_color is done by customize (as it is supposed to be with Custom UI) - the flickering is observed. If the icon_color defined inside the template - NO flickering.