Frontend: getCardSize is called before child cards have been created in custom-cards

[RomRider]

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

Since the lazy-loading of cards has been introduced, custom-cards stacking other cards can't properly compute the size of the card as the child/children of the custom-card are not defined when getCardSize is called.

Expected behavior

getCardSize should be called asynchronously or called after the element has been updated completely.

Steps to reproduce

This is how it is implemented right now in my card:
https://github.com/custom-cards/stack-in-card/blob/master/src/stack-in-card.ts#L120
https://github.com/custom-cards/stack-in-card/blob/master/src/stack-in-card.ts#L148-L150

It should return the size of the child element but always returns 1 because this._card is assigned later on because of the (await HELPERS)

Environment

• Home Assistant release with the issue:
• Last working Home Assistant release (if known): < 0.106
• Browser and browser version: N/A
• Operating system: N/A

Problem-relevant configuration

Not relevant.

Javascript errors shown in your browser console/inspector

None

Additional information

[bramkragten]

getCardSize is used to determine in what column cards should go, calling this later as you suggest would make the layout jump badly.

[RomRider]

I understand. But that's a breaking change for custom cards since lazy loading was introduced (didn't happen with 0.105 or before).

[bramkragten]

I understand, and we should think of a better solution.

[akasma74]

getCardSize is used to determine in what column cards should go, calling this later as you suggest would make the layout jump badly.

After updating to 0.107 it does jump badly even if the layout has only (or mainly) standard cards. Wasn't the case before update.

[balloob]

One solution is that we allow getCardSize to raise an exception with a promise stored on it. If we get this in hui-view we will await that promise and then continue building layout. Maybe include a two second timeout so custom cards can't end up preventing us doing layout

[bramkragten]

getCardSize would not be defined as the element is not there yet...

[balloob]

Okay so we return element loading promise including firing ll-rebuild?. I think that we should actually not raise an error because that prevents other cards from being loaded. We need to collect them all, see how many are promises, await them all. It's complicated logic

[bramkragten]

yeah, but ideally start rendering the top cards if they are not promises... So instead of awaiting them all, start awaiting at the first unresolved promise we encounter

[bramkragten]

I'll go and play with it next week.

[eddyliao]

Any news on this?
i got some cool vertical stack in cards, but i guess im going to have to revert back to the normal vertical card instead

[scstraus]

@RomRider , @ofekashery, how’s it looking on the new promise based system for vertical-stack-in card or stack-in card? Any chance one of your cards will be fixed?

I’m trying to decide whether to wait it out, go back to .107.7, or try to hardcode all the card sizes, and would rather not put the work in if there’s a fix on the horizon. Thanks in advance.

[ricarva]

Hi, everyone. @RomRider @ofekashery @balloob: is there any movement on this issue? Thanks

[iantrich]

this is closed, don't comment on closed issues.