Card is empty after a browser's page reload (F5) in a "yaml-mode" dashboard

nathan-gs / ha-map-card

A Map Card for Home Assistant

https://community.home-assistant.io/t/map-card-a-slightly-improved-map-card/693088

MIT License

19 stars 4 forks source link

Card is empty after a browser's page reload (F5) in a "yaml-mode" dashboard #13

Closed ildar170975 closed 3 months ago

ildar170975 commented 3 months ago

I started observing a very strange glitch:

Add a card to a yaml-mode view:

title: test-2
path: test-2
cards:

- type: custom:map-card
x: 10
y: 10

Refresh a view page:

Card is shown, very good.
Reload a browser's page (F5 in Chrome).
Card is shown as empty:

There is a message in a console: map-card.js?hacstag=734825457050:169 Uncaught TypeError: Cannot read properties of undefined (reading 'getContainer') at ResizeObserver.

In a "storage-mode" dashboard - I see no glitches, the card is shown after F5:

HA 2024.3.1 card 0.5.0 Chrome 123.0.6312.59 + Win10 same in FF

nathan-gs commented 3 months ago

@Manuel-Materazzo I believe we introduced a small bug with the resizeobserver.

Manuel-Materazzo commented 3 months ago

After a first investigation, i can see that:

During a page refresh the ResizeObserver seems to get one final call when the card is already disposed, causing the Uncaught TypeError on YAML mode, and a Cannot read properties of undefined (reading 'invalidateSize') error on standard mode.
For some unknown reason, on YAML mode the disconnectedCallback() method gets called right before the first render, effectively disposing both the map and resize observer, i need to futher investigate on this behaviour.

ildar170975 commented 3 months ago

Also, in a "storage" mode I sometimes see "card not found" error after F5. Sometimes need to press F5 again. Sometimes this error comes only for a couple of seconds, then the card is properly shown.

Was not sure if this behaviour related to the discussed "empty card" issue - that is why have not registered an issue yet.

Manuel-Materazzo commented 3 months ago

Also, in a "storage" mode I sometimes see "card not found" error after F5. Sometimes need to press F5 again. Sometimes this error comes only for a couple of seconds, then the card is properly shown.

i can't seem to reproduce the issue, what version of HA are you on?

ildar170975 commented 3 months ago

HA 2024.3.1 card 0.5.0 Chrome 123.0.6312.59 + Win10

Cannot reproduce it too... No idea what caused it. I only updated to 0.5.1 since the time I observed the glitch.

nathan-gs commented 3 months ago

@ildar170975 can you test the latest version (v0.5.2), thanks to @Manuel-Materazzo it should be fixed.

It's fixed in my HA.

ildar170975 commented 3 months ago

@nathan-gs Thanks a lot!

Now in both yaml & storage dashboards - the card is shown after F5. No "grey card" as it was.

But sometimes (rather often - let's say 30% cases) -after F5 a "card not found error" occurs. It is shown for less than 1 sec, then a card is shown properly. Happens in both yaml & storage modes:

storage:

yaml:

ildar170975 commented 3 months ago

Shall we close the current issue & proceed with THIS problem in a separate issue?

Manuel-Materazzo commented 3 months ago

But sometimes (rather often - let's say 30% cases) -after F5 a "card not found error" occurs. It is shown for less than 1 sec, then a card is shown properly. Happens in both yaml & storage modes:

I've tried to reproduce the issue on a fresh install of your setup, but to no avail. It's an issue related to HA lazy loading, as discussed on this thread. If i'm to take a wild guess, it happens because we are fetching external libraries from unpkg, might be worth looking into a way of importing from HA itself.

ildar170975 commented 3 months ago

If this is a long way & uneasy task - I would suggest to close this issue & create a new one, and let it be there until you guys sort it out. The issue is not crucial imho.