amaximus / garbage-collection-card

Custom Lovelace card for Garbage Collection custom component
MIT License
128 stars 24 forks source link

Slowing down entire Lovelace interface in HomeAssistant 0.115.2 #45

Closed charlyr82 closed 3 years ago

charlyr82 commented 3 years ago

I have three garbage collection sensors, and adding them to a view in my dashboard using this custom card slows my entire Lovelace interface down to a point where it is practically non-responsive.

The cards do load, but take a significant amount of time, and then any interaction with the Lovelace interface takes approximately 10 seconds to respond.

Opening the developer tools in chrome and looking at the console I am presented with a warning: [Deprecation] Synchronous XMLHttpRequest on garbage-collection-card.js:281 the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

I don’t use verbose_state: true as I use the numeric state for some automations.

This card was working perfectly for me in 0.114, I don’t know if some of the optimising that has been going on recently within HomeAssistant has caused this to happen?

amaximus commented 3 years ago

Could you please let me know if your garbage collection cards are included into some other cards (e.g. vertical-stack)?

I have seven garbage collection cards for testing (each for one weekday) without having them included into any other type of cards and they are not causing high load or similar issues.

I'm assuming some interference with some other card.

charlyr82 commented 3 years ago

In my original configuration they were included in their own view on one of my dashboards. For testing purposes I have created a new empty dashboard, and copied just that view to it, so the code for the entire dashboard is below:

title: Test Dashboard
views:
  - badges: []
    cards:
      - entity: sensor.general_waste
        icon_size: 35px
        type: 'custom:garbage-collection-card'
      - entity: sensor.recycling
        icon_size: 35px
        type: 'custom:garbage-collection-card'
      - entity: sensor.garden_waste
        icon_size: 35px
        type: 'custom:garbage-collection-card'
    icon: 'mdi:trash-can'
    panel: false
    path: bins
    title: Bins

This test dashboard has decreased the delay that I am noticing, however there is definitely still a delay present. As this is the only view in this dashboard, I have been testing by switching between different dashboards in the sidebar. Switching between any of my dashboards other than this one is pretty much instant (always less than 1 second). Switching from any dashboard to this one is the same, however switching from this test dashboard to any of my others (whilst very occasionally is instant) normally takes 5 seconds or more (from the new dashboard gaining the background highlight in the sidebar to the dashboard actually loading in the main area of the page).

gee-jay-bee commented 3 years ago

I'm experiencing something similar with the delays and the deprecation warning. I also have 3 garbage collection sensors and their presence on my main dashboard grinds everything to a halt. Moving to a dashboard of their own makes the main dashboard work normally.

Looking at the network trace, the en.json file is getting polled over and over again and it is quite often taking a long time to respond.

Screenshot 2020-09-25 at 17 35 27

I also wasn't having issues with 114 so I guess that the 115 refactor is introducing the increased response time for this object. The deprecation warning I suppose is saying that the user experience gets harmed if the response is delayed because it's all happening synchronously. Perhaps use onload to handle the response asynchronously?

amaximus commented 3 years ago

Newest version (0.10.1) added performance improvements.

Please update the card, reload and let me know the results.

charlyr82 commented 3 years ago

Thank you very much @amaximus I have updated the card to 0.10.1, and tested on both chrome and the iOS app, this has fixed the issue for me and I no longer have any lag in my Lovelace interface.

amaximus commented 3 years ago

Thanks for confirming.

gee-jay-bee commented 3 years ago

Whilst performance in Chrome on my laptop is definitely improved with the new version, the iOS companion app (and Safari on my iPhone 11) both still have problems when I re-instate the three cards on my main dashboard. I'd say 90% of the time, opening the app just causes the page to get completely stuck with perhaps a few icons loading. Refreshing Idrag down) doesn't help and typically then makes the UI completely unresponsive requiring a forced close of the app. If I'm quick, I can get in and clear the cache but this rarely helps. Removing them from the main dashboard (on my laptop), killing the companion app and re-opening then gets back the app back to normal.

For reference, the configuration that causes the main dashboard to hang is this:

  - entity: sensor.garden
    hide_date: true
    icon_color: green
    hide_before: 2
    type: 'custom:garbage-collection-card'
  - entity: sensor.recycling
    hide_date: true
    icon_color: green
    hide_before: 2
    type: 'custom:garbage-collection-card'
  - entity: sensor.waste
    hide_date: true
    icon_color: black
    hide_before: 2
    type: 'custom:garbage-collection-card'