Frontend: Entities grid is super slow to load when you have lots of entities.

[niemyjski]

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

I noticed that the entities page takes a very long time to load on chrome or safari using a high end 2018 MacBook. It never used to be like this the last time I was in there (I think 104ish). It completely freezes the page while trying to load 811 entities.

It was so slow that lighthouse failed to profile the page:

I almost think the problem is due to so many Dom updates that the digest cycle is constantly running instead of building up the component tree and appending to the Dom in one operation. Even doing batch operations is super slow to select the grid checkboxes

Expected behavior

It should load instantly and not peg the cpu.

Steps to reproduce

1. Navigate to entities page and notice it taking forever to load when you have many entities.

Environment

• Home Assistant release with the issue:
• Last working Home Assistant release (if known):
• UI Type (States or Lovelace):
• Browser and browser version:
• Operating system:

106.1 home-assistant

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[Mariusthvdb]

as commented in the linked issue #5020 I can't open it at all, hangs the interface forcing a manual window close and reopen in a new tab.

Chrome is slightly better, loading after a minute or so..
so not a Safari isolated issue (MacBookPro 32gb, Hassio 106.6)

[bramkragten]

Is fixed in 0.107

[niemyjski]

Is there a pr to see what the changes are so I can learn from it?

[bramkragten]

Yeah, see https://github.com/home-assistant/frontend/pull/5066
We virtualized the table, so only the rows that are visible are rendered instead of all rows.