Lovelace - include views, loads very slow and often need restart of HA to show up. Is it normal?

Hi guys.

Is it normal that include of views in the lovelace loads very slow after edit and change to the yaml file and often need restart of HA to show up. Is that normal behavior?

Best regards

1 Like

Are you editing via the config file or the UI editor?

If via the config file, you need to refresh the view after you save the changes. There is an menu in the upper right hand corner of all views to refresh. The changes should show up very quickly.

And sometimes, depending in what you’re diplaying and changing (images for example) a clear of browser cache helps too :slight_smile:

I´m editing via yaml mode with visual studio code

I’ve experienced something similar, where changes made to included views won’t show up until i go into the main ui-lovelace.yaml and hit save (cmd/ctrl+s) there.

This is because to my knowledge HA only reads the ui-lovelace.yaml file and none of the other files. Lovelace will only trigger a full refresh if ui-lovelace.yaml Has changed. If you change any other file, ui-lovelace.yaml will not change hence HA thinks nothing has changed. So saving ui-lovelace.yaml would change the timestamp and thus lovelace will reload.

1 Like

I’ve been using Lovelace-gen that gets around that issue (and other things)

I use lovelace_gen too, though it doesn’t refresh for me though XD, I still need to save after I edit an included file. (I don’t use it everywhere though, only on the pages where it needs to be).

In my case I just have ui-lovelace.yaml open and I just save it quickly after editing (on windows it is ctrl+s). Has worked for a year now without any problems. But I would advice to use vscode or sublime for this, if you use notepad++ for example (which is imho a bad editor for yaml) you will need to add a space.

Btw, do you use lovelace-gen or lovelace_gen? There is a difference between them as lovelace-gen is deprecated, whereas lovelace_gen isn’t (yeah it is confusing I know XD)

Perhaps it doesnt and I’m mistaken? Does the way that you do the includes make a difference, I use !include_dir_list (see link)

The underscore one - I’d forgotten there was two!

I use

views: 
  !include_dir_merge_list lovelace/views/

might be that’s why XD

I am experiencing the same isue and this does not work for me either. In my ui-lovelace.yaml I include for each view several vertical-stacks, i.e. (just tested include_dir_list):

views:

  - title: dashboard
    icon: mdi:home
    path: dashboard
    cards:
      - !include /config/ui-lovelace/cards/dashboard/dashboard-01.yaml
      - !include /config/ui-lovelace/cards/dashboard/dashboard-02.yaml
      - !include /config/ui-lovelace/cards/dashboard/dashboard-03.yaml

Do you just include the views and each view .yaml contains all cards?

I’ve started adding includes into my view yaml recently - no issue with having to save the base file everytime

just for reference: there 's no reloading issue at all (in my 3 setups) clicking the top right menu in the header, select refresh and the full Lovelace config is refreshed and reloaded to see the new added changes in the config …

using yaml mode, many includes that use includes etc etc.

this must be incorrect… I never touch ui-lovelace.yaml, and the frontend changes per click on refresh, as described above. Don’t know where you heard about this?

only issue I see is that often this causes the Hue lights to become unavailable, indicative of system timing issues… it always settles immediately afterwards though.

1 Like

I dont have the header, so refreshing with the UI is impossible

yes, but that is all up to you of course, not showing the header.
That a whole different matter though than stating the system is not doing what is is designed to do…when in fact it does just fine

When people talk about a refresh, I think of a browser refresh. I also think the OP meant that (and not the Ha refresh button).

But you are right, my bad.
Also, I didn’t state it, I actually said: “to my knowledge” (so that is based on experience not on facts :rofl::joy:)

I see. Indeed, that won’t work.
Browser refresh/pulldown mobile only reloads the currently loaded configuration. What it does do is eg when you have change pictures in the backend, load these into the existing config. Though it is rather difficult on mobile to refresh the cache. (We had to reinstall the app in the previous version to load new pictures…)

what you can do instead of the 3-dots refresh, is delete the cache via the browser menu and force a refresh. Still, depending on your browser, even that sometimes doesn’t have the expected result.

clicking the 3 dots does, or, if your using Custom Header, click the replacement of it of course…The little cloud in my case :wink: ) Even a little notification pops up asking if you want top refresh the config. very nice.

Yes I love the way you made your header haha. Though saving ui-lovelace.yaml will also trigger a refresh so no need to do all this crazy stuff. Or indeed press the reload button. But I have no experience using that button as my header is hidden completely :rofl::joy:.

The question is though, did the OP solve his problem?

@Mariusthvdb I might borrow your weather code from your header :rofl::joy: (if you don’t mind that is)

sure, glad to share, though in this case it is nothing special, other than a few templates in the marquee:

header_text: >-
  {% if is_state('input_boolean.ch_use_header_text_template','on')%}
  <style>
  #flipper{color:#999;}
  #flip {height:24px;overflow:hidden;}
  #flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
  #flip div:first-child {animation: show 10s linear infinite;}
  @keyframes show {
  0% {margin-top:-144px;}
  17% {margin-top:-96px;}
  33% {margin-top:-96px;}
  50% {margin-top:-48px;}
  67% {margin-top:-48px;}
  83% {margin-top:0px;}
  100% {margin-top:0px;}}
  #flipper p {position:fixed;color:#999; }
  </style>
  <div style='float: left'>Ha Rpi4:&nbsp;</div>
  <div id=flip><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  Daily -  {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
  Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {% endif %}

I actually only needed the one you created on the right side of the header. I have different plans with the actual header text (I will have the text change depending on the view you are on, which can be done using the browser_mod sensor)

Though I actually want buttons on the right side, ánd be able to use the footer for tabs. But I imagine this is not possible.

I will no longer hijack this thread. Haha