Malformed ingress of z2m UI in Home Assistant

[Calimerorulez]

Description of problem:
I just installed the addon, and when I use ingress in HA, the page is malformed, because there is a .css missing Chrome tells me :)

http://homeassistant.local:8123/api/hassio_ingress/k9QpGAriW-uh-KQe1lBMZR80xirg3xP0WkcV7_ymq2o/main.3d1da3b8dbc50333ee92.css.map

When I visit the link, the error is:

Cannot GET /main.3d1da3b8dbc50333ee92.css.map

Zigbee2mqtt add-on version (if edge, please report commit hash):

1.22.0-2

Running platform (details from Suypervisor > System)

Core: core-2021.11.3
Supervisor: supervisor-2021.10.8
Operating System: HassOS 6.6

[habitoti]

Just wanted to create the same ticket, seeing I am seemingly not the only one ;-)

Usually the very first time after restart of HA it works w/o issues, but navigating away and then back here, it more often than not fails to load css. Sometimes, though, it also might work. Looks like some timing issue. So the css is not missing, but sometimes the access simply fails with a 404.

[habitoti]

Seems like this Github is pretty much abandoned? This is a very annoying behaviour, tbh, because it's kind of random whether you get a proper UI or just garbage. But no responses from devs (in most of the issues raised lately here...)

[Cycor]

The missing map css isn't the problem, that's just debugging help, for me it seems to be a theme key saved in the chrome Local Storage, if you use the developer console and remove the Theme key, the layout is back ok.

This is saved on the homeassistant host level so any other ha app using ingress can set that value, it contained a bootstrap skin name that didn't exist.

[habitoti]

It's not really missing, it just sometimes can't be loaded (it's BTW Safari, not Chrome, but I think it happens for both). If you reload a few times or navigate somewhere else and then back, it might show up ok. So it seems like some shady timing somewhere....

[Cycor]

Ok, found the cause of the theme key, the DoubleTake addon creates it, so every time I open that app, z2m is messed up

[habitoti]

So how comes that even a freshly opened HA straight on Ingress Z2M might already be messed up then? I don't even have a DoubleTake add-on...

[Cycor]

Looking at your error you are missing the light.css, so that is unfortunately a different error than I am getting.

Looking at #242 there is a warning "Could not find specific theme" and the logfile indicates he does have doubletake installed, so it could possible be his problem.

[habitoti]

It's the light theme for me because I switched dark theme off. I believe the root cause is the same (and again, it's not really "missing" -- though I have no clue what mechanism other than a pure file access is responsible for delivering it...and only doing so every once in a while correctly)

[Bascht74]

I have similar problems:

It takes a long time to load this really very big js file:

Sometimes there is an error:

Chrome is not very responsive if it happens. I even doesn't reload the page. But if you go elsewhere and back, sometimes it works...

If I try a couple of times or switch to another section in HA and back, it works sometimes...

If not, it looks like that:

[habitoti]

Seems to work now with V 1.22.1-1. It still comes up scrambled initially, but then manages to (re)load properly.

EDIT: Uhhh...this was a bit too quick. It's pretty stable on my iPad now, but still fails often on Desktop (macOS, Safari):

It's now saying it's stuck on loading styles...
Which makes me believe even more that it's rather some timing issue.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days