Frontend: lovelace custom-card gets created twice, but is connected & used only once

[AmoebeLabs]

Checklist

• [x] I have updated to the latest available Home Assistant version.
• [x] I have cleared the cache of my browser.
• [x] I have tried a different browser to see if it is related to my browser.

The problem

The trace of the card shows that instead of the 3 defined YAML cards, 6 cards are created: each card twice!
However, the first incarnation of the cards get never "connected", ie no connectedCallback

The log shows the cardId (e.g. j8m81xzz0) and timestamp(eg 1601984027765).

*****Event - card - constructor j8m81xzz0 1601984027765
*****Event - setConfig j8m81xzz0 1601984027766
*****Event - set hass j8m81xzz0 1601984027772
*****Event - card - constructor 37whh6n7v 1601984027774
*****Event - setConfig 37whh6n7v 1601984027774
*****Event - set hass 37whh6n7v 1601984027783
*****Event - card - constructor usjzbpn9f 1601984027784
*****Event - setConfig usjzbpn9f 1601984027784
*****Event - set hass usjzbpn9f 1601984027802

From this point, cards are created once again, but this time get connected.
The previous cards (can be checked by there id) are never updated and/or drawn.

You also see that some cards get disconnected() and connected() again (same timestamp). Also weird behaviour.

*****Event - card - constructor fnt7ysuaj 1601984027804
*****Event - setConfig fnt7ysuaj 1601984027804
*****Event - set hass fnt7ysuaj 1601984027809
*****Event - connectedCallback fnt7ysuaj 1601984027810
*****Event - card - constructor l8zh6a4fa 1601984027813
*****Event - setConfig l8zh6a4fa 1601984027814
*****Event - set hass l8zh6a4fa 1601984027820
*****Event - connectedCallback l8zh6a4fa 1601984027821
*****Event - card - constructor nyndp76kk 1601984027824
*****Event - setConfig nyndp76kk 1601984027824
*****Event - set hass nyndp76kk 1601984027844
*****Event - connectedCallback nyndp76kk 1601984027845
*****Event - render fnt7ysuaj 1601984027848
*****Event - firstUpdated fnt7ysuaj 1601984027859
*****Event - Updated fnt7ysuaj 1601984027861
*****Event - disconnectedCallback fnt7ysuaj 1601984027862
*****Event - connectedCallback fnt7ysuaj 1601984027862
*****Event - render l8zh6a4fa 1601984027862
*****Event - firstUpdated l8zh6a4fa 1601984027866
*****Event - Updated l8zh6a4fa 1601984027867
*****Event - disconnectedCallback l8zh6a4fa 1601984027868
*****Event - connectedCallback l8zh6a4fa 1601984027868
*****Event - render nyndp76kk 1601984027869
*****Event - firstUpdated nyndp76kk 1601984027885
*****Event - Updated nyndp76kk 1601984027890
*****Event - disconnectedCallback nyndp76kk 1601984027893
*****Event - connectedCallback nyndp76kk 1601984027893
*****Event - render fnt7ysuaj 1601984027894
*****Event - Updated fnt7ysuaj 1601984027895
*****Event - render l8zh6a4fa 1601984027895
*****Event - Updated l8zh6a4fa 1601984027896
*****Event - render nyndp76kk 1601984027901
*****Event - Updated nyndp76kk 1601984027921
*****Event - render fnt7ysuaj 1601984027982
*****Event - Updated fnt7ysuaj 1601984027990
*****Event - set hass fnt7ysuaj 1601984032967
*****Event - set hass l8zh6a4fa 1601984032968
*****Event - set hass nyndp76kk 1601984032974
*****Event - set hass fnt7ysuaj 1601984032982
*****Event - set hass l8zh6a4fa 1601984032983
*****Event - set hass nyndp76kk 1601984032986
*****Event - set hass fnt7ysuaj 1601984032992
*****Event - set hass l8zh6a4fa 1601984032994
*****Event - set hass nyndp76kk 1601984032998
*****Event - render nyndp76kk 1601984032998
*****Event - Updated nyndp76kk 1601984033003

Expected behavior

Each custom card is only created once!

Steps to reproduce

The constructor is the following.

class MyCard extends LitElement {
  constructor() {
    super();
    console.log('*****Event - card - constructor', this.cardId, new Date().getTime());
  }

Environment

This is a new custom-card...

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

I'm playing catchup from hass 0.98 to the current 0.115.6 after a year of illness. I'm slowly recovering and trying to fix some issues in existing cards while also picking up development of cards I started about 1 year ago.

And for that, I'm not sure if I missed some change in regard to creating custom-cards, or if this is a bug in lovelace.
I hope that @iantrich or @thomasloven could give me a hint how to debug this issue.

My dev 'environment' is very, very basic: I save the js file in the right folder in hass, hit F5, and use Chrome to debug the card. So no .devcontainer and other fancy stuff. That is something for later...

[thomasloven]

There are several cases where parts of or the entire layout is rebuilt from scratch.
You should not rely on e.g. your card existing unless it is connected or the setConfig function to be called only once.

The zombie card will most likely eventually get garbage collected and cease to exist.

[bramkragten]

Can you share your complete config?

[AmoebeLabs]

There are several cases where parts of or the entire layout is rebuilt from scratch.
You should not rely on e.g. your card existing unless it is connected or the setConfig function to be called only once.

I do check if a card is connected. That is why I have implemented connected/disconnected/updated/firstupdated functions.
So I don't have crashes or something, but I can see that the same code produces different results in hass 0.98 and the current version, as if the order of events are different.

The zombie card will most likely eventually get garbage collected and cease to exist.

That is not worrying mee, but creating zombie cards takes time, ie displaying the panel showing these cards takes extra time caused the the creation of zombie cards.

Can you share your complete config?

What do you mean by this? lovelace yaml files, the source code of the card?
The custom card is still in a private github repo, as its a work in progress for me.
So let me know what you need, @bramkragten ...

The card was developed in 0.98, and already adapted for > 0.115. Was pretty difficult, after a year doing nothing 😄
I still have a weird icon issue (see: #7224)

Some early screenshots of this little card, partly from 2019:

[bramkragten]

The Lovelace view config, and are you using any other custom components?

[bramkragten]

Was not able to reproduce with a simple config.

[iantrich]

Just have to say it...those are some sexy cards :rofl:

[AmoebeLabs]

The Lovelace view config, and are you using any other custom components?

I will make a new, small Lovelace config, as I'm using around 35 custom cards according to my resource.yaml file.
I will then test that first with my card to see if the problem persists and report back.

Was not able to reproduce with a simple config.

That would suggest that I have either some problem in my config, or in the implementation of my card. But the constructor is called by Lovelace I presume, so that would be a weird issue.
As written above, I will create a smaller, simpler Lovelace config to check the problem in a minimal environment.

I might spin up another - third - hass container. Sensors are mostly using MQTT, so I can test with real live data 😄

Just have to say it...those are some sexy cards 🤣

Thanks!

You're looking at a single, but flexible card, fully defined by yaml. Example nr 3 for instance with 14 sensors (states), 14 arcs, 2 icons and 7 names take about 600 lines of yaml to define. That is not something for the average user I guess. Templating objects within the card should resolve this for some part and make it much more manageable.

I have no idea when I can release the first version. Still recovering you now, so things progress slowly...

[thomasloven]

Anything made by me is a contender for what's causing this. Particularly card-mod.

[AmoebeLabs]

card-mod is used in both configs. I will check that part too!

[AmoebeLabs]

I removed most of the includes in my Lovales yaml file to make sure those views don't interfere in some kind.

What I found now is the following using two views: a simple one and a view with my new card:
First test:

• select simple view
• switch to view with 3 new cards

NO problems: I see 3x constructor calls

Second test:

• select simple view
• hit F5 / ctrl-F5
• switch to view with 3 new cards

NO problems: I see 3x constructor calls

Third test:

• select view with 3 new cards
• hit F5 / ctrl-F5

YEP, problems: I see 6x constructor calls.

And this is of course how I develop: change the software, and hit F5 or ctrl-F5 to load the card software.
So it has something to do with refreshing the view in my case. Can't check other cards though if they exhibit the same behaviour with refreshing the page.

[maykar]

Do you use Custom Header? Just had a similar issue posted for it, right before I archived the thing :)

https://github.com/maykar/custom-header/issues/272

[zibous]

In my use case it is conditioned by "lovelace-layout-card".

Testcases see:
see: https://github.com/thomasloven/lovelace-layout-card/issues/99

w/o ""lovelace-layout-card" everything works fine.

[RomRider]

@bramkragten, I have also some perf issues reported on button-card see custom-cards/button-card#375

Was not a problem until lazy loading more and more things in the interface. I can't remember which version introduced the problem. It seems fairly inconsistent (fast on 1 android system, and super slow on the other one, both are very fast phone/tablet).

It might be related to HA-core, not specifically to layout-card. Should we open a separate frontend issue to investigate, I think it's more general

[AmoebeLabs]

I set a breakpoint on the creation of my new card and hit F5:

• first call originates somewhere from core something
• second call originates from card-mod (v2.03)

After I removed card-mod from my resources.yaml, my card gets created only once!

I still have to check my other card, to see if this solves this issue. In return I do miss the card-mod functionality!!!

So, @thomasloven, any idea what is causing this with that card of yours?

[thomasloven]

https://github.com/home-assistant/frontend/issues/7246#issuecomment-704925097

Card-mod has to force the entire interface to rebuild in order to work.

[thomasloven]

If the cause has been determined to be a custom card, I suggest this issue is closed.

[AmoebeLabs]

Yep, that is a good point 😄

I had some weird thing after I removed card-mod from Lovelace: my card wasn't created twice anymore, but card-mod was still active. I saw it in the Chrome inspector and it kept working for other cards.

Only after a restart of hass, card-mod was fully gone, and with that also a lot of formatting in about every view I use 😢

So I either have to find a replacement for card-mod, or just accept the initial double load of cards 🤔