Frontend reloads multiple times

Configuration Frontend
1

Hello,

I am writing in the hope of finding the answer to a very annoying behavior. Whenever I load home assistant, the frontend reloads multiple times on the default view.
When I am scrolling the page, this results in it jumping back to the top. This repeats 2-3times until it is finally stable.

On my PC I see that the behavior corresponds wiht loading a specific javascript file from the frontend:
grafik

The content of this file is:

export const __webpack_ids__=["18832"];export const __webpack_modules__={39737:function(t,i,s){s.a(t,(async function(t,n){try{s.r(i);var o=s(73742),e=(s(98334),s(59048)),a=s(26292),r=s(16230),c=s(93647),h=s(75948),_=s(99389),u=s(1548),d=t([h]);h=(d.then?(await d)():d)[0];class g extends e.oi{setConfig(t){if(!t)throw new Error("Invalid configuration");this._config=t}shouldUpdate(t){return(0,c.G2)(this,t)}render(){if(!this._config||!this.hass)return e.Ld;const t=this.hass.states[this._config.entity];return t?e.dy` <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}"> <mwc-button @click="${this._pressButton}" .disabled="${t.state===r.nZ}"> ${this.hass.localize("ui.card.button.press")} </mwc-button> </hui-generic-entity-row> `:e.dy` <hui-warning> ${(0,_.i)(this.hass,this._config.entity)} </hui-warning> `}async _pressButton(t){t.stopPropagation(),this._config?.confirmation&&!await(0,u.g)(this,this.hass,this._config.confirmation,this.hass.localize("ui.card.button.press"))||this.hass.callService("button","press",{entity_id:this._config.entity})}}g.styles=e.iv`mwc-button:last-child{margin-right:-.57em;margin-inline-end:-.57em;margin-inline-start:initial}`,(0,o.__decorate)([(0,a.Cb)({attribute:!1})],g.prototype,"hass",void 0),(0,o.__decorate)([(0,a.SB)()],g.prototype,"_config",void 0),g=(0,o.__decorate)([(0,a.Mo)("hui-button-entity-row")],g),n()}catch(t){n(t)}}))}};
//# sourceMappingURL=18832.744909e0a826a911.js.map

Checking frontend/src/panels/lovelace/create-element/create-row-element.ts at a099e65a9d980c8dd687c7eb2eacfa220cc827c9 · home-assistant/frontend · GitHub it seems like this part of the code is related to a button entity.

As the behavior is not happening on all of my pages, but just some of them (both on the phone and Laptop), it seems like this may be related to some button on the page.

I would like to avoid a trial and error approach, where I am randomly deleting stuff, so I am hoping for some more clever insights by raising this post.

Cheers

2

Not sure if it helps, but the calling stack as shown in chrome is the following:

grafik
grafik593×792 15.2 KB

Overall I can’t make any sense out of it. On a small page the issue happens when I add two plotly-graphs. This somehow causes the 18832 javascript file to be loaded later, such that I notice the jump to the top.
If I remove them, the jump does not happen, as the 18832 is processed faster than me being able to scroll down.

On my main view though there is no plotly graph at all, so this may be another indicator that this is rather a performance topic than an issue with a specific add-on.

The only thing I know for sure is that it always happens when the 18832.js file is being loaded…

grafik
grafik680×116 3.42 KB

Response:

export const __webpack_ids__ = ["18832"];
export const __webpack_modules__ = {
    39737: function(t, i, s) {
        s.a(t, (async function(t, n) {
            try {
                s.r(i);
                var o = s(73742)
                  , e = (s(98334),
                s(59048))
                  , a = s(26292)
                  , r = s(16230)
                  , c = s(93647)
                  , h = s(75948)
                  , _ = s(99389)
                  , u = s(1548)
                  , d = t([h]);
                h = (d.then ? (await d)() : d)[0];
                class g extends e.oi {
                    setConfig(t) {
                        if (!t)
                            throw new Error("Invalid configuration");
                        this._config = t
                    }
                    shouldUpdate(t) {
                        return (0,
                        c.G2)(this, t)
                    }
                    render() {
                        if (!this._config || !this.hass)
                            return e.Ld;
                        const t = this.hass.states[this._config.entity];
                        return t ? e.dy` <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}"> <mwc-button @click="${this._pressButton}" .disabled="${t.state === r.nZ}"> ${this.hass.localize("ui.card.button.press")} </mwc-button> </hui-generic-entity-row> ` : e.dy` <hui-warning> ${(0,
                        _.i)(this.hass, this._config.entity)} </hui-warning> `
                    }
                    async _pressButton(t) {
                        t.stopPropagation(),
                        this._config?.confirmation && !await (0,
                        u.g)(this, this.hass, this._config.confirmation, this.hass.localize("ui.card.button.press")) || this.hass.callService("button", "press", {
                            entity_id: this._config.entity
                        })
                    }
                }
                g.styles = e.iv`mwc-button:last-child{margin-right:-.57em;margin-inline-end:-.57em;margin-inline-start:initial}`,
                (0,
                o.__decorate)([(0,
                a.Cb)({
                    attribute: !1
                })], g.prototype, "hass", void 0),
                (0,
                o.__decorate)([(0,
                a.SB)()], g.prototype, "_config", void 0),
                g = (0,
                o.__decorate)([(0,
                a.Mo)("hui-button-entity-row")], g),
                n()
            } catch (t) {
                n(t)
            }
        }
        ))
    }
};
//# sourceMappingURL=18832.744909e0a826a911.js.map