card may not be displayed in a dashboard edit mode

[ildar170975]

Simple - the card may not be displayed. Create a new dashboard a add 2 cards:

  - theme: ''
    title: xxx
    path: xxx
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: xxx
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.xiaomi_cg_1_co2

Absolutely same as reported for some other custom cards like windrose-card, horizon-card.

Must be:

What I see after refreshing the page:

Replace markdown with history-graph - same:

Use the 1st card w/o vertical-stack - works again.

[ildar170975]

Similar issues with custom cards: https://github.com/aukedejong/lovelace-windrose-card/issues/39 https://github.com/rejuvenate/lovelace-horizon-card/issues/57

[karwosts]

I took a little time to look at this, I feel like it's probably a frontend bug, but I can't quite put my finger on the actual problem yet.

Typically when a custom card is first rendered, the view is built without it, and then a flag is set to either rerender the view once it loads, or display an error box after a timeout if it doesn't load in time. Once the element is loaded, a rebuild event is fired:

https://github.com/home-assistant/frontend/blob/bffdfcf61c4833293e9782aef4bdcc7c7921152a/src/panels/lovelace/create-element/create-element-base.ts#L127-L130

This goes first to the view, but the rebuild is skipped in edit mode and passed to the root:

https://github.com/home-assistant/frontend/blob/bffdfcf61c4833293e9782aef4bdcc7c7921152a/src/panels/lovelace/views/hui-view.ts#L75-L81

The hui-root is supposed to rebuild the whole view when it gets the ll-rebuild event, but for some reason the event never arrives. I haven't been able to figure out why not yet. Can't figure out what the vertical stack has to do with it, or why it works for some custom cards and not others.

https://github.com/home-assistant/frontend/blob/bffdfcf61c4833293e9782aef4bdcc7c7921152a/src/panels/lovelace/hui-root.ts#L545

[ildar170975]

@karwosts Thank you very much for looking at this issue! I don feel myself confident to register this problem in the Frontend github - in many similar cases feedbacks from dev were like "this is a custom card, closing". Would be great if some Dev person like you investigate a possible reason of this glitch (as I said, similar behaviour was observed for some other custom cards - windrose, horizon).

[ildar170975]

or display an error box after a timeout if it doesn't load in time

Is it hui-error-card? Could you check this (similar glitch, another custom card): https://user-images.githubusercontent.com/71872483/252022545-6dcb0c3b-22b4-49b3-b556-d9c3445f0267.png

[karwosts]

Yes in the first build pass we create hui-error-card for cards that are not loaded. However they are initially set to display:none, so they are hidden. We then set a timeout function.

If the card does not load before the timeout, we remove display:none so the error card becomes visible, says something to the effect of "custom card does not exist" with a red background.

If the card does load before the timeout, we fire ll-rebuild event to rebuild the view with the card, and cancel the timer.

However since ll-rebuild event is not working right, we neither rebuild the view, nor do we remove the display:none (because the card did load). So it just gets left in this weird state where it is an invisible hui-error-card.

[karwosts]

I filed a frontend issue, but I kind of exhausted my ability to debug further, I'm a bit lost at this point.

I don't expect it will get much traction unfortunately, but at least it is there for tracking.

[ildar170975]

Dear @karwosts !!! Thanks a lot for all your efforts!!!