Sometimes card not loaded
Salsalove opened this issue · 5 comments
Salsalove commented
Sometimes the card is not loaded and I need to reload the page several times to be able to see it. Any fix?
Salsalove commented
This is an exemple:
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
box-shadow: none;
background-color: {%- set sensor = states('alarm_control_panel.aqara') %}
{%- if sensor == 'triggered' %}rgba(255, 70, 70, 0.8)
{%- else %}rgba(33, 41, 46, 0.4)
{%- endif %}
}
cards:
- type: custom:button-card
entity: script.perimetriale
show_state: false
show_name: true
name: Perimetro
aspect_ratio: 1/1.15
layout: vertical
icon: |
[[[
if (states['alarm_control_panel.aqara'].state == 'triggered'){
return `mdi:bell-ring-outline`}
return 'mdi:shield-moon-outline'
]]]
styles:
icon:
- animation: |
[[[
if (states['alarm_control_panel.aqara'].state == 'triggered'){
return `blink 1s ease infinite`}
]]]
- color: white
- width: 45px
- place-self: center
card:
- border-radius: 20px
- box-shadow: none
- background: none
- padding: 10px
- border: none
img_cell:
- background-color: |
[[[
if (states['alarm_control_panel.aqara'].state == 'armed_home'){
return `rgba(254,209,90,0.8)`}
return 'rgba(33, 41, 46, 0.2)'
]]]
- border-radius: 50%
- place-self: center
- width: 55px
- height: 55px
- margin-top: '-8px'
name:
- color: white
- align-self: center
- justify-self: center
- font-weight: bold
- font-size: 10px
- margin-left: 1px
- margin-bottom: 0px
tap_action:
action: call-service
service: script.perimetriale
- type: custom:button-card
entity: script.uscita
show_state: false
show_name: true
name: Uscita
aspect_ratio: 1/1.15
layout: vertical
icon: |
[[[
if (states['alarm_control_panel.aqara'].state == 'triggered'){
return `mdi:bell-ring-outline`}
return 'mdi:shield-home-outline'
]]]
color: rgb(248, 83, 68)
styles:
icon:
- animation: |
[[[
if (states['alarm_control_panel.aqara'].state == 'triggered'){
return `blink 1s ease infinite`}
]]]
- color: white
- width: 45px
- place-self: center
card:
- border-radius: 20px
- box-shadow: none
- background: none
- padding: 10px
- border: none
img_cell:
- background-color: |
[[[
if (states['alarm_control_panel.aqara'].state == 'armed_away'){
return `rgb(248, 83, 68)`}
return 'rgba(33, 41, 46, 0.2)'
]]]
- border-radius: 50%
- place-self: center
- width: 55px
- height: 55px
- margin-top: '-8px'
name:
- color: white
- align-self: center
- justify-self: center
- font-weight: bold
- font-size: 10px
- margin-left: 1px
- margin-bottom: 0px
tap_action:
action: call-service
service: script.uscita
- type: custom:button-card
entity: script.disarma
show_state: false
show_name: true
name: Disarmato
aspect_ratio: 1/1.15
layout: vertical
icon: |
[[[
if (states['alarm_control_panel.aqara'].state == 'triggered'){
return `mdi:bell-ring-outline`}
return 'mdi:shield-off-outline'
]]]
styles:
icon:
- animation: |
[[[
if (states['alarm_control_panel.aqara'].state == 'triggered'){
return `blink 1s ease infinite`}
]]]
- color: white
- width: 40px
- place-self: center
card:
- border-radius: 20px
- box-shadow: none
- background: none
- padding: 10px
- border: none
img_cell:
- background-color: |
[[[
if (states['alarm_control_panel.aqara'].state == 'disarmed'){
return `rgb(60, 179, 113)`}
return 'rgba(33, 41, 46, 0.2)'
]]]
- border-radius: 50%
- place-self: center
- width: 55px
- height: 55px
- margin-top: '-8px'
name:
- color: white
- align-self: center
- justify-self: center
- font-weight: bold
- font-size: 10px
- margin-left: 1px
- margin-bottom: 0px
tap_action:
action: call-service
service: script.disarma
ildar170975 commented
A humble suggestion - make the card SIMPLER and try to find out a Minimal Working Example to demonstrate the issue.
kubusiaasty commented
Same problem, size of code doesn't matter. Even on simple empty card there is a problem with loading e.g:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bedroom
secondary: >-
🌡️ {{states('sensor.bedroom_temp_hu_sensor_temperature')}} °C
|💧{{states('sensor.bedroom_temp_hu_sensor_humidity')}} %
icon: mdi:bed
tap_action:
action: navigate
navigation_path: /dashboard-futurehome/bedroom
hold_action:
action: none
icon_color: '{{ ''amber'' if is_state(''light.bedroom_lights'', ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.tv_led
icon: |
{% if is_state('light.tv_led','on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-off
{% endif %}
icon_color: |
{% if is_state('light.tv_led','on') %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 1px;
}
card_mod:
style: |
ha-card{
height: 109px;
}
ildar170975 commented
Same problem, size of code doesn't matter. Even on simple empty card there is a problem with loading e.g:
One more humble suggestion: test with STANDARD cards inside.
Providing a long code with custom cards just makes a job more difficult.
Here is my case:
type: custom:stack-in-card
mode: vertical
cards:
- type: entity
entity: sun.sun
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
The card is usually displayed in not-Edit mode:
Always displayed in Editor:
And very often is not displayed in Edit mode:
Observed in Win10x64: Chrome, FF
2023.11.2
Probably related to home-assistant/frontend#17266
ildar170975 commented
2024.8
I do not observe the issue anymore.