Card briefly shows incorrect state when switching views

[skykingjwc]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser

Describe the bug
When switching views, cards briefly show incorrect background color when being set by entity state.
This causes flicker on dashboard views which share the same card.
Other card set properties by state to not appear to be affected.

Version of the card
Version: v4.1.1

To Reproduce
This is the configuration I used:
bugtest.yaml

button_card_templates:
  test-button:
    show_icon: false
    show_label: true
    show_state: false
    label: LIGHT
    styles:
      card:
        # - border: 1px solid red;
        - height: 100%
        - padding: 0px
        - border-radius: 0px
        - color: white
        - border-radius: 7px
        - text-transform: uppercase
        - background-color: '[[[ if (entity.state =="on") return "red"; else if(entity.state == "off") return "blue"; else return "black"; ]]]'
      grid:
        - grid-template-areas: '"l l" "n n" ". ." "on_status off_status"'
        - grid-template-columns: 2fr 1fr
        - grid-template-rows: 2fr 1fr 2fr 1fr
      label:
        - font-size: 30px
        - line-height: 25px
        - justify-self: end
      name:
        - font-size: 15px
        - line-height: 16px
        - justify-self: end
      custom_fields:
        on_status:
          - color: '[[[ if (entity.state == "on") return "white"; else return "black"; ]]]'
          - justify-self: end
        off_status:
          - color: '[[[ if (entity.state == "off") return "white"; else return "black"; ]]]'
          - justify-self: end
    tap_action:
      action: toggle
    custom_fields:
      on_status: "ON"
      off_status: "OFF"

views:
  - !include bugview1.yaml
  - !include bugview2.yaml

bugview1.yaml

title: Bug1
id: home
path: home
type: masonry

cards:
  - type: custom:button-card
    template:
      - test-button
    entity: light.basement_light
    name: Basement

bugview2.yaml

title: Bug2
id: bug2
path: bug2
type: masonry

cards:
  - type: custom:button-card
    template:
      - test-button
    entity: light.basement_light
    name: Basement

Screenshots

Expected behavior
Background color should be set before card is rendered as to avoid flicker when switching views

Desktop (please complete the following information):

• Browser: Chrome
• Version: 119.0.6045.160
  Also confirmed bug exists in Firefox and Edge. I use Chrome 99% of the time

Smartphone (please complete the following information):

• Device: Blackview Tab 8 WiFi (https://www.amazon.com/gp/product/B0C28KK8F1/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&th=1)
• OS: Android 12, Kernel 4.19.232
• Browser: Fully Kiosk
• Version: 1.54 play

Additional context
Steps to reproduce bug

1. Start with toggleable entity associated with card switched ON.
2. Browse to Bug1 view.
3. Click card to toggle entity OFF. Background should turn blue.
4. Switch to Bug 2 view.
5. Click card to toggle entity ON. Background should turn red.
6. Switch to Bug 1 view again.
7. Watch the card carefully. When switching to back Bug 1 view the background color will briefly show blue (off state) when it should be red from the start. This causes distracting flicked when switching between views.

The other elements, such as the state display do not appear to be affected.

[skykingjwc]

Also confirmed that using states["light.basement_light"] instead of entity.state in the background-color javascript template does not make a difference

[skykingjwc]

Tested similar configuration using native HA Light cards and the issue does not appear to be present

[ultimate-tester]

+1, I experience the same problem. On top of that, if I hold-tap on a button the card (actually ALL somehow related cards) stay highlighted.

[Mariusthvdb]

cant say I fully understand what you are describing, and the screenshot doesnt help.

but I do notice you have an odd template

      - background-color: '[[[ if (entity.state =="on") return "red"; else if(entity.state == "off") return "blue"; else return "black"; ]]]'

since this if for a boolean entity, why no simply use:

      - background: >
          [[[ return entity.state == 'on' ? 'red' : 'blue'; ]]]

might not help, but at least its a cleaner template and you can then rule it out being the cause of your issue

[ultimate-tester]

Maybe the video explains more:
https://github.com/custom-cards/button-card/assets/580758/bdc31b66-2128-4379-bd96-6183cba8cf45

[Mariusthvdb]

sorry, but that has nothing to do with switching views? Maybe that title does not describe the issue very well, but now I am even more confused....

all I can see are some instable buttons flickering (cant see if that happens on a click, or just always)
o wat, you said

if I hold-tap

sorry.
Id suggest to write that up as a separate issue, for ease of following up

[ultimate-tester]

I'll do that now to mitigate the risk of hijacking this issue report.