Template-Entity-Row momentarily displays its templates

[123 (Taras)]

I’m using the latest version of Thomas Loven’s Template-Entity-Row (i.e. the version that supports tap_action) and noticed what appears to be a rendering artifact.

When the browser page is refreshed, using either F5 or CTRL+F5, for a very brief instant the templates (for state and secondary) are displayed on the screen. In other words, you see the raw templates for a fraction of a second before you see the result of the templates.

Once you know it can happen, it’s hard not to notice its presence during a page refresh (or when the page is first displayed). It’s evident in 0.106.5 and also in 0.107.0.

Here’s the relevant portion of my ui-lovelace.yaml file:

views:
  - title: Overview
    icon: mdi:home
    cards:
      - type: entities
        show_header_toggle: false
        entities:
          - type: custom:template-entity-row
            entity: climate.thermostat
            state: "{{state_attr(config.entity, 'hvac_action') | title}}  {{state_attr(config.entity, 'current_temperature')}} °C"
            secondary: "{{states(config.entity) | title}} {{state_attr(config.entity, 'temperature')}} °C"
            tap_action:
              action: more-info

Here are several frames from a screen recording, showing the progression of the UI being rendered. The rendering happens quickly, nevertheless the templates are clearly visible for a very brief moment.

• The first Thermostat is a standard entities card (it serves as the “control” in this experiment).
• The second Thermostat is also an entities card but with template-entity-row.

Frame 1: Most cards are incomplete at this stage. The templates are clearly visible.

Frame 2: Some cards are partially rendered. The Template-Entity-Row card appears to be complete now.

Frame 3: Most cards are rendered. The templates reappear.

Frame 4: All cards are now fully rendered.

Is this considered to be normal behavior or is it a bug?

---

EDIT
Tested with Firefox 74.0 on Ubuntu 18.04.4 LTS

[petro]

I’d consider it normal but you can raise an issue with the card. It might not be possible to fix.

[jocnnor (Jim O'Connor)]

I opened it up with debug tools and messed around for longer than I care to admit.

I modified the template-entity-row.js file to not use the state.name if it contains the template characters.

s = (void 0 !== this.state.name && !this.state.name.includes("{{")) ? this.state.name : t ? t.attributes.friendly_name || t.entity_id : void 0

Now instead of showing the entire template, the state name is blank until it’s evaluated. However, now you might notice the strings flickering…but this is less jarring than the entire template being rendered for a few frames.

There’s no way to fix the order in which things happen. I tried stepping through WTF lovelace is doing and it’s clearly beyond my abilities to understand that lol.

[Mariusthvdb (Marius)]

yep, been there since release. It might have to do with the speed Lovelace is refreshed, which depending on your config takes longer, and system resources accordingly (see that in the Hue lights going unavailable while refreshing too)

I use the card for a long list of the github sensors of the custom cards in my resources, and see the values in the long list scroll from the templates to their templated values as a kind of special effect… quite funny actually. Don’t think I ever see it happen during regular operation.

[123 (Taras)]

Thank you all for confirming this is considered to be nominal.

I thought I had found a replacement for Custom UI, especially now that template-entity-row supports tap_action, but this ‘peekaboo, I see you’ behaviour isn’t acceptable. I’ll have to find another way to achieve what I want.

[Mariusthvdb (Marius)]

fwiw, Ive just replaced my secondaryinfo-entity-row templates with the template-entity-row, in my decluttering templates exactly because it now supports the actions.

It might still be of use for you in this particular card config, depending on the templates you need. This is what I did:

# used this before:
#card:
#  type: custom:secondaryinfo-entity-row
#  entity: '[[entity]]'
#  secondary_info: '[[ {entity}.attributes.type ]]: [[ {entity}.attributes.original_date ]]'

card:
  type: custom:template-entity-row
  entity: '[[entity]]'
  secondary: >
    {{states.[[entity]].attributes.type}}: {{states.[[entity]].attributes.original_date}}

#  below isn't necessary since template-entity-row uses 'entity'
#  name: '{{states.[[entity]].attributes.friendly_name}}'
#  state: '{{states.[[entity]].state}}'
#  image: '{{states.[[entity]].attributes.entity_picture}}'

Since we’re on the topic of T-E-R, I noticed it shows the Name field practically touching the entity-picture, and doesn’t respect the regular distance between the fields in a row:

compared to:

which is regular, see eg:

Anyone else seeing this? Just noticed it doesnt show the unit_of)_measurement either, dont think it takes this from the entity (yet)

might need to file Filed an issue with Thomas.