I am currently using card mod to apply a Jinja if else template to a mushroom card so that it checks if an entities state is on, and if the check comes back true then the background color of the card is changed so that it is more obvious that it is on.
While this works well, the problem I am facing is whenever I changed views the logic is rerun every time and so if an entities state is on the background color of the card will reset from the updated color, back to its default color, and then back to the updated color again. This whole process takes over 350ms to complete which leads to a noticeable fade in and out of the color.
Does anyone know a way to speed up this process of locally cache the state of the entity so that the code doesn’t need to be run every time?
This is the code for one of my light card stacks:
cards:
- type: custom:mushroom-title-card
title: Climate
style: |
ha-card {
--title-font-size: 24px;
--title-font-weight: 400;
--title-line-height: 0;
--title-spacing: 0px 0px 0px;
}
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
margin: 0px 0px 4px 0px
padding: 0px
card_margin: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 4fr 1fr
cards:
- type: custom:mushroom-fan-card
entity: fan.aidans_fan
icon_animation: true
fill_container: true
show_percentage_control: false
tap_action:
action: call-service
service: fan.turn_off
target:
entity_id: fan.aidans_fan
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: >
ha-card { background-color: {{
'var(--ha-card-secondary-background)' if
is_state('fan.aidans_fan', 'on') }}; }
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- fan_chip
entity: fan.aidans_fan
icon: mdi:fan-speed-1
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.aidans_fan
data:
percentage: 33
hold_action:
action: none
double_tap_action:
action: none
- type: custom:button-card
template:
- fan_chip
entity: fan.aidans_fan
icon: mdi:fan-speed-2
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.aidans_fan
data:
percentage: 66
hold_action:
action: none
double_tap_action:
action: none
- type: custom:button-card
template:
- fan_chip
entity: fan.aidans_fan
icon: mdi:fan-speed-3
styles:
card:
- margin-right: 12px
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.aidans_fan
data:
percentage: 99
hold_action:
action: none
double_tap_action:
action: none
- type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
margin: 0px 0px 0px 0px
padding: 0px 0px 0px 0px
card_margin: 0px 0px 0px 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
cards:
- type: custom:mushroom-climate-card
entity: climate.aidans_aircon
name: Aidan's Aircon
fill_container: true
hvac_modes:
- cool
- heat
- fan_only
show_temperature_control: true
style: >
ha-card { background-color: {{
'var(--ha-card-secondary-background)' if
is_state('climate.aidans_aircon', 'on') }}; }
layout:
margin: 4px 0px 0px 0px
padding: 0px 0px 0px 0px
card_margin: 0px 0px 0px 0px