Cards Loading Slower in card-mod 3.4.1
Anashost opened this issue · comments
My Home Assistant version:
2023.12.4 / 2024.1.2
My lovelace configuration method (GUI or yaml):
GUI
What I expected to happen:
how card used to load in Card-mod 3.4.0
What happened instead:
how cards are loading in Card-mod 3.4.1
same issue in android HA app and browser (tested chrome/ brave)
Minimal steps to reproduce:
yaml of the cards above:
Note: the slowness is only visible in a crowded page.
type: custom:stack-in-card
card_mod:
style: |
ha-card {
{% if is_state('group.office_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
mode: vertical
keep:
outer_padding: false
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
mushroom-shape-icon {
--icon-size: 76px;
display: flex;
margin: -20px 0px 0px -20px !important;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
}
primary: Office
secondary: ''
icon: mdi:bed
layout: horizontal
entity: group.office_lights
icon_color: |-
{% if is_state('group.office_lights','on')%}
amber
{%endif%}
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
double_tap_action:
action: none
badge_color: ''
badge_icon: ''
fill_container: true
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: none
state:
- operator: default
color: grey
- value: 'on'
color: orange
icon: mdi:lightbulb-group
entity: group.office_lights
styles:
icon:
- width: 19px
grid:
- position: relative
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 50%
- top: 3%
- height: 20px
- width: 20px
- font-size: 10px
- line-height: 20px
- font-weight: bold
card:
- border-radius: 50%
- width: 40px
- height: 40px
custom_fields:
notification: |
[[[
if (states['sensor.office_lights_of_count'].state == '0')
return ' '
return `${states['sensor.office_lights_of_count'].state}`
]]]
name: ' '
- type: custom:button-card
state:
- value: 'on'
icon: mdi:thermometer
entity: sensor.office_temperature
styles:
icon:
- color: |
[[[
return `${states['sensor.office_temp_color'].state}`
]]]
- width: 15px
- position: relative
- top: 4px
- right: 12px
card:
- border-radius: 80%
- width: 40px
- height: 40px
name:
- color: white
- font-size: 10px
- position: relative
- bottom: 10px
- left: 5px
- font-weight: bold
name: |
[[[
if (states['sensor.office_temperature'].state == 'unknown')
return '-'
return `${states['sensor.office_temperature'].state}°`
]]]
Error messages from the browser console:
none
300 lines of code is not a minimal working example.
Besides, 3 custom cards here...
300 lines of code is not a minimal working example. Besides, 3 custom cards here...
yaml reduced
(unrelated to the issue):
return `${states['sensor.office_lights_of_count'].state}`
should be just
return states['sensor.office_lights_of_count'].state;
And in JS it is needed to use ";" in places like this:
if (...)
return '-'
return `${states['sensor.office_temperature'].state}°`
@ildar170975 It's working fine the way I've configured it.
Doing this:
should be just
return states['sensor.office_lights_of_count'].state;
Resulted an error:
It's working fine the way I've configured it.
Not gonna convince you. But check the docs, ask in button-card threads etc.
The major thing is that to sort out any issues with card-mod you should have cleared all your other code first.
Sorry i don't mean you're wrong, but it didn't work that way for me, i made those cards over a year ago, so maybe card-mod/button-card changed a little over time.
The things I were talking about are only button-card-related.
To sort out any problems we need to simplify/localize/exclude any other options.
Button-card is at least 3 years same in part of JS...
Ive just edited my comment
You're right, but i thought if the card works and no errors in HA or in browser inspection, then everything is alright 🤔
then everything is alright
unfortunately, could be not in general.
Yeah, sometimes it's a pain to debug some issues.
For now i will stick to version Card-mod 3.4.0 as it doesn't lead to slowness in rendering the card and icons. Hopefully others may notice similar issue to mine and report to get it fixed.
I experience the same with card-mod 3.4.1
I can now see the style being applied. With 3.4.0 it was instant.
I might be that the page loads faster now, but with 3.4.1 I see some cards changing after the page loads.
I'm using card-mod with the minimalist theme/button-card.
Yeah, it's s mostly the icons and buttons like button-card that are taking longer to load, and make loading feels laggy.
Same issue here. I use mod-card to have a fixed height and background color of layout card (which doesn't have card element itself, so need mod-card). I use it to create my own header card. It loads up and in a splitseconds I see it get the correct size. Definitely a noticeable downgrade and looks horrible when switching from tabs. I reverted back to 3.4.0, which works normal.
I hope this can get fixed.