Problems with Picture-Elements

[holdestmade]

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.

Describe the issue you are experiencing

Have an issue with picture_elementstaking a long time to load, using only HA picture elements cards and 100x100px icons on a background image, all in www folder. It is only since updating to 2021.9. Blue spinning circles and takes anything up to 20 seconds to load all the icons (before it was instant, never saw any loading)

Issue is on Chrome and Android HA app.

Describe the behavior you expected

Not seeing the blue spinning circles as in 2021.8

Steps to reproduce the issue

1. Picture elements cards with 100x100px icons

3. ... s=

What version of Home Assistant Core has the issue?

2021.9

What was the last working version of Home Assistant Core?

2021.8

In which browser are you experiencing the issue with?

Chrome Version 93.0.4577.63 (Official Build) (64-bit) Android HA App

Which operating system are you using to run this browser?

Windows

State of relevant entities

No response

Problem-relevant frontend configuration

type: picture-elements
image: /local/images/BG_BINStrans.png
elements:
  - type: image
    entity: sensor.green_bin_days
    image: /local/images/green_bin2.png
    title: null
    state_filter:
      "unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
      "Today": drop-shadow(0px 0px 3px Green) saturate(200%)
      "Tomorrow": drop-shadow(0px 0px 3px Green) saturate(150%)
    style:
      top: 65%
      left: 15%
      width: 15%
  - type: state-label
    entity: sensor.green_bin_days
    tap_action:
      action: none
    hold_action:
      action: none
    style:
      top: 35%
      left: 15%

  - type: image
    entity: sensor.brown_bin_days
    image: /local/images/brown_bin2.png
    title: null
    state_filter:
      "unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
      "Today": drop-shadow(0px 0px 3px Brown) saturate(200%)
      "Tomorrow": drop-shadow(0px 0px 3px Brown) saturate(150%)
    style:
      top: 65%
      left: 50%
      width: 15%
  - type: state-label
    entity: sensor.brown_bin_days
    tap_action:
      action: none
    hold_action:
      action: none
    style:
      top: 35%
      left: 50%

  - type: image
    entity: sensor.blue_bin_days
    image: /local/images/blue_bin2.png
    title: null
    state_filter:
      "unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
      "Today": drop-shadow(0px 0px 3px Blue) saturate(200%)
      "Tomorrow": drop-shadow(0px 0px 3px Blue) saturate(150%)
    style:
      top: 65%
      left: 85%
      width: 15%
  - type: state-label
    entity: sensor.blue_bin_days
    tap_action:
      action: none
    hold_action:
      action: none
    style:
      top: 35%
      left: 85%

Javascript errors shown in your browser console/inspector

No response

Additional information

Similar issue (Closed) https://github.com/home-assistant/frontend/issues/9968

[spacegaier]

So in the end, everything will be rendered correctly, it just takes longer?

Please check your browser console logs. Are there any errors? Do the network requests to the images take longer than before or is it purely the rendering of the page?

[holdestmade]

Yes it all renders ok, just takes up to 20 seconds (mostly though it is around 5 seconds)

The page loads fine and all the non-picture_element items load fine, just the images take a while to load

Only warning in chrome log is: The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'.

And this in verbose:

[Violation] Forced reflow while executing JavaScript took 79ms
[Violation] Forced reflow while executing JavaScript took 557ms

[spacegaier]

I cannot reproduce the issue on my end. Do you have any custom cards / elements in your instance? If yes, try disabling those to see if the issues goes away then, to rule out any hidden side-effects.

[holdestmade]

I've tried disabling all custom cards and creating a new lovelace dashboard and still the same Is the blue spinning indicator new ? Has it always been there and just not seen it ? But now I do see them, is my lovelace, for some reason, running slower ?

[holdestmade]

There was another issue from someone else but it was closed:

9968

[holdestmade]

Another thing, once they are all loaded, switches between tabs on the top they load straightaway If I tap a button on the left and then go back it loads them slowly again

EDIT: this doesn't happen now, once they are loaded they stay loaded until a reload or refresh

[JunghaJungha]

Hi. I mentioned before this problem. I have never seen the blue spinning circles, so they are new since version 2021.9.

Also my picture elements card is fully reloading as soon as I manually change an element (like a switch on the wall to turn on the light, or a change in temperature sensor). You might confirm that.

As with over 100 elements, there is really frequent reloading and rebuilding my floorplan. The spinning circles keep popping up and drives me crazy.

So I was forced to roll back to the previous stable version.

I really hope someone is taking this action point and solve it, because the interactive floorplan is the coolest thing in HA.

Thanks.

[holdestmade]

I wasn't actually using config-template-card but had it installed in HACS so have uninstalled it and its still the same. I don't get the constant reload, I only see the loading circles when I first open the pages and then after that they don't appear, until I do a page reload or refresh

[JunghaJungha]

But the spinning circles is new. I wonder why they introduced them.

[bramkragten]

To indicate a (camera) picture is loading.

[bramkragten]

This seems to be related to custom cards, so closing this issue. Please raise an issue with the custom card.

[holdestmade]

@bramkragten Why closed ? As I stated above I removed all my custom cards and it is still the same

[bramkragten]

OK, then please give me the full config as I'm not able to reproduce with the part you provided in the issue.

[bramkragten]

Yes, the indicator is new.

[holdestmade]

See above, my page config is just several of those. If you make YAML file of the one above and copy it say 5 times in a vertical-stack with different names and add them to a dashboard it does it for me

The icons are all from icons8 and are 100x100px

[lockyt]

I am getting the same issues. Although everything seems to be displaying and updating ok, I do get the swirls.

I will also add that it flattens the battery on my iPad in the wall faster than it will charge when I have HA app loaded and displayed. Doesn't when I close it down - so lots of processing going on.

[spacegaier]

See above, my page config is just several of those. If you make YAML file of the one above and copy it say 5 times in a vertical-stack with different names and add them to a dashboard it does it for me

The icons are all from icons8 and are 100x100px

I still cannot really reproduce it (Win 10 + FF and Chrome). If I take your YAML from above and 1:1 put it seven times in a vertical stack and load the page, I see the loading spinners for less than half a second.

I also used the Chrome profiler and after the page is loaded there is basically no processing to speak of in the next 30 seconds. Note: The "long" initial page load is due to me having disabled the caching.

[lockyt]

Perhaps try using home assistant companion app or safari?

[spacegaier]

Works just as fine in the HA companion app on my Android tablet. I don't own any Apple devices, so cannot test Safari.

[holdestmade]

I updated to 2019.5 and seems to improved it, sure it is coincidence though. There is still a 1-3 second time for all to load (from reload or refresh, but once loaded all navigation between pages works instantly and no loading indicators. I have a floorplan using picture elements too and that is the same On my HA app on android phone it is worse, taking 5-10 seconds, but as on chrome, it works fine once are all initially loaded.

[dewoert]

My (lovelace) floorplan is also having this problem with the 2021.9.x versions, it completly refreshes evey 5 seconds in my case. Restoring 2021.8.8 solves that problem. I can created the same reload-issue in 2021.8.8 when i use the developr-tools (F12 on most browsers) and disable cache. To me it looks like in 2021.9.x caching is disabled somehow or somewhere ? (Or maybe only with Picture element ?)

[smarthousetips]

Same issue here. I downgraded to 2021.8.8 and now everything is rendering as expected. My issue is with any Picture Elements

[DigitalElise]

I am also having the same issue with 2021.9.6 flashing or reloading the entire page and also the spining loader icons.

[bramkragten]

Would be good to know if you are using custom cards, or more specifically, config-template-card.

[holdestmade]

I am using a few custom cards but have removed them for testing and still the same

Not using config-template-card

[bramkragten]

The flashing and reloading seems to be in combination with config-template-card right?

Your issue is just slow loading, but not flashing and reloading right?

[holdestmade]

Yes, there is no flashing and reloading, just slow loading of elements on first load, reload or refresh in chrome On the HA android app it is worse and takes longer

[JunghaJungha]

Maybe the comment of smonesi is helpful here.

I had a deeper look at https://github.com/home-assistant/frontend/pull/9690 and although I'm not really a Java/TypeScript developer I believe this PR does more than "Only update cameras when they are visible" as it introduces the concept of image "loading" (and the spinning image) for all the images, not just cameras.

It looks like the "loading" code is triggered when a picture-elements is first loaded but, for some reason, also every time it is re-loaded due to its content being changed by the surrounding config-template-card. This affects all the images content of the picture-elements, including the main image whose height is also reset to the default 100px during load (hence the "squeeze" effect shown in the screenshot above).

Unfortunately I am not able to even try to fix either the hui-image code (by removing the "loading" feature on static images, that seems a bit unnecessary) or the config-template-card (if possible, to avoid it triggering a complete reload of its inner card).

(from https://github.com/iantrich/config-template-card/issues/78#issuecomment-918561777 )

[iantrich]

Things have been sorted out on config-template-card's side of things

[Nantero1]

But why display a blue loading circle in the first place... For me, the issue wasn't solved. Don't really see a big benefit in the flickering and the new "loading animation" :(

[smarthousetips]

This did not solve for me. I am still experiencing my floor plan reloading/rendering every time a light is turned on our the time changes.

On Sep 18, 2021, at 3:42 AM, Nante Nantero @.***> wrote:

 But why display a blue loading circle in the first place... For me, the issue wasn't solved. Don't really see a big benefit in the flickering and the new "loading animation" :(

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[mitchsurp]

Also having this issue on my picture-elements install. I have exactly one camera, and it's now just a spinning circle. It never loads the actual camera image.

[smarthousetips]

Yep, I am still having issues with my floorplan that is populated through picture-elements. Rerenders whenever something changes on the screen. I've updated to the new version whenever released and reverted back to 8.8 after testing and determining this has not been solved.

On Tue, Sep 21, 2021 at 1:30 PM mitchsurp @.***> wrote:

Also having this issue on my picture-elements install. I have exactly one camera, and it's now just a spinning circle. It never loads the actual camera image.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/home-assistant/frontend/issues/9988#issuecomment-924360239, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEOTDFTL2WXV5F6HDUPKA33UDDTNHANCNFSM5DULC22A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Kayla Siemon Slower Response Expected: M - F 8 AM to 4:30 PM @.*** 509.396.8017 Preferred Communication: Email/Text

[frankiej911]

Same problem since the last update this month. I created an interactive floorplan with sweethome3d. I’m using multiple layers in this floorplan to make some awesome light effects. I’m not using any custom cards, only one big picture elements card. But since this update multiple loading icons breaks this floorplan.

[smonesi]

I opened a PR that should fix this issue (https://github.com/home-assistant/frontend/pull/10086)... it's my first PR, I hope I opened it in the correct way!

However, for picture-elements + config-template-card (which is the use-case where this issue is more obvious) I still suggest to use what has been discussed here https://github.com/iantrich/config-template-card/issues/78 and here https://github.com/iantrich/config-template-card/issues/79), basically by moving the config-template-card inside picture-elements rather than outside (which is what most people, including myself, used to do). I discovered that even if the configuration becomes a bit longer, there is a significant gain in performance when using lots of entities (because only part of the picture-elements is updated when a single entity is changed, rather than the whole picture-elements).

[holdestmade]

@smonesi Thanks for doing the PR - it has solved the slow loading issue for me in 2010.10

[diversit]

Thanks for fixing this. My UI has been totally useless for over a month. Upgrading to 2021.10.2 fixed it. 🙏