Significant lag before cards are rendered #170
Description
I just added a few more vertical-stack-in-card cards to my dashboard, and for some reason they usually take multiple seconds to render. This makes the UI extremely janky. Any ideas what I'm doing wrong? I've uploaded a screen recording here:
vertical-stack-in-card-lag.mp4
Here's the corresponding dashboard YAML. I extracted this from my full dashboard as a (relatively) minimal example to demonstrate the problem. This lag doesn't happen 100% of the time, but it seems to trigger especially often when switching from another dashboard to this one.
views:
- title: Test
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 59px auto
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:television-classic
fill_container: false
tap_action:
action: none
card_mod:
style: |-
ha-card {
border: 0;
margin-left: 0;
padding-left: 4px !important;
}
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room TV Power Toggle
fill_container: true
badge_icon: ''
icon: ''
card_mod:
style: |-
ha-card {
min-height: 50px;
text-align: center;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
padding: 0
grid-template-columns: 90px auto
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: 'Source:'
secondary: ''
fill_container: false
tap_action:
action: none
card_mod:
style: |-
ha-card {
border: 0;
margin-left: 0;
padding-top: 9px;
padding-left: 0px !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:music
fill_container: true
card_mod:
style: |-
ha-card {
border: 0;
text-align: center;
}
- type: custom:mushroom-template-card
icon: mdi:television-box
fill_container: true
card_mod:
style: |-
ha-card {
border: 0;
text-align: center;
}
- type: custom:mushroom-template-card
icon: mdi:laptop
fill_container: true
card_mod:
style: |-
ha-card {
border: 0;
text-align: center;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
padding: 0
grid-template-columns: 90px auto
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: 'Volume:'
secondary: ''
fill_container: false
card_mod:
style: |-
ha-card {
border: 0;
margin-left: 0;
min-height: 40px;
padding-top: 9px;
padding-left: 0px !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:minus-thick
fill_container: true
card_mod:
style: |-
ha-card {
border: 0;
text-align: center;
}
- type: custom:mushroom-template-card
icon: mdi:plus-thick
fill_container: true
card_mod:
style: |-
ha-card {
border: 0;
text-align: center;
}