Slow or No Loading of 'vertical-stack-in-card' cards

Configuration Frontend
1

Hoping someone can help with either my config - I am not sure when this issue started showing up but it was working flawlessly for some time.

SETUP: I have multiple stacked cards (horizontal, vertical-stack-in-card, etc.) that allow me to manage the lovelace frontend and display things “perfectly” for my screens. This sets what is in which column, where they sit, etc. and I wouldn’t be surprised if I’ve gone about it in an ugly way but I have been bolting on changes since early days.

ISSUE: Some of the specific vertical-stack-in-cards (custom component installed via HACS) currently take an extra 3-5 seconds to load and sometimes they don’t load at all unless I refresh the browser. This is across mutiple browsers and machines and after cache clearing. What is causing this?

E.g:

HAcards1
HAcards12244×887 93.9 KB

HAcards2
HAcards22252×848 122 KB

The cards not loading are all vertical-stack-in-card with a horzontal stack such as the below -

                  - type: custom:vertical-stack-in-card
                    cards:
                      - cards:
                          - entity: switch.aircon_cool24
                            icon: mdi:snowflake
                            name: Cool 24°
                            tap_action:
                              action: toggle
                            theme: default
                            type: entity-button
                          - entity: switch.aircon_cool22
                            icon: mdi:snowflake
                            name: Cool 22°
                            tap_action:
                              action: toggle
                            theme: default
                            type: entity-button
                          - entity: switch.aircon_cool20
                            icon: mdi:snowflake
                            name: Cool 20°
                            tap_action:
                              action: toggle
                            theme: default
                            type: entity-button
                        type: horizontal-stack
                      - cards:
                          - entity: switch.aircon_heat22
                            icon: mdi:weather-sunny
                            name: Heat 22°
                            tap_action:
                              action: toggle
                            theme: default
                            type: entity-button
                          - entity: switch.aircon_heat20
                            icon: mdi:weather-sunny
                            name: Heat 20°
                            tap_action:
                              action: toggle
                            theme: default
                            type: entity-button
                          - entity: switch.aircon_heat18
                            icon: mdi:weather-sunny
                            name: Heat 18°
                            tap_action:
                              action: toggle
                            theme: default
                            type: entity-button
                        type: horizontal-stack

All cards are nested under a layout-card to allow me to set columns:

            max_columns: 4
            type: custom:layout-card
            layout_type: custom:vertical-layout
2

Hello Sam!
Have you found a solution to your problem in the meantime? I also have the same problem as you. Sometimes the items just won’t load. After a refresh they are back.

3

No unfortunately not. Definitely faster to load after any core updates or a restart of the server. Gets worse the longer the session runs.

4

My solution: Use stack-in-card instead of vertical-stack-in-card. No problems so far.

5

Hello, i am also following the topic.

When i stack layers where there is custom:vertical-stack-in-card or custom:stack-in-card the UI load slow and sometimes not fully

Refresh broswer fix the issue but it’s annoying

6

Hello , I had same problem when stack cards vertical-stack and custom:vertical-stack-in-card.

I solved my problem by using grid card

type: grid
columns: 1

instead of:

type: vertical-stack
7

Same issue, and more or less the same fix, but I used layoutcard vertical stack as the Grid card was producing huge vertical gaps for some reason.