In my lovelace UI (see picture below), I am using a lot of horizontal and vertical stacks. In the bottom left I have 4 picture entity cards, of which 3 show a camera feed. What I have noticed is that when I want to edit the UI through “configure UI”, especially when editing this left vertical stack, the RAM usage of my browser (Chrome/Edge/Firefox/Safari all the same) slowly but steadily goes up. This then leads to a very slow UI, up to the point that it is unusable / unresponsive. Chrome then uses 3GB of RAM as compared to 400MB when just viewing the Lovelace UI. Configuring with the code editor in the UI is slightly more doable, but still sluggish. It seems that the editing leads to RAM filling up, maybe with images from the camera feeds?
Has anyone noticed something similar and maybe even a solution? I know I could use the yaml manual config, but I would love to keep using the UI editor…
The same problem with me. Firefox needs between 9-12 GB of memory or Chrome needs between 2-6 GB while editing Lovelace. Changes in the code view only become visible after a few seconds and sometimes the entire browser freezes.
Editing in YAML is out of the question, because what is the visual editor for?
So. After a few days of testing lovelace, the number of stacks is not the problem. I noticed that no matter how many stacks or cards there are, the frontend fills up the ram memory. how fast depends on the number of stacks or cards. i think that the only option at the moment is to quickly edit the card, save it and reload the browser tab. memory consumption only decreases after reloading the browser tab.
