Lovelace Card Preloader

In preparation for Home Assistant 0.107, I have created the Lovelace Card Preloader:

Add it to your Lovelace resources:

resources:
  - type: js
    url: /local/path/lovelace-card-preloader.js

and then add something like this to your Lovelace config:

preload:
  - markdown
  - gauge

This will preload those cards on reload of the page.
This is useful in the following cases:

  • Custom cards which have not been updated for 0.107
  • Using the standard cards as rows within an entities card by using the “custom:hui-cardname-card” trick

One limitation of this is that it works by creating a temporary instance of the cards it is preloading and these won’t have a valid configuration. This means you will see errors like the following in the browser console (example for the markdown card):

hui-markdown-card Error: Invalid Configuration: Content Required

(This will only happen when the page is refreshed)

8 Likes

So 0.107 is going to break this very handy feature?

See this:

Specifically, it says:

A second change that was made, is that we no longer load all element types by default. We load them when they are needed. This will also help performance but might break your custom card.

This affects custom cards which load standard cards but also affects using the use of standard cards as entity rows via “custom:hui-cardname-card” - there was an issue posted regarding this (now closed):

I actually based my code on the suggested workaround posted in that issue.

1 Like

So if I was using custom:hui-conditional-card I add this to preload:?

preload:
  - conditional

Yes, you would use the default name (although using custom:hui-conditional-card would possibly work as well I haven’t actually tried it with that).

1 Like

OK, to clarify…

Say I have a card (the custom atomic-calendar card) that hasn’t been updated for the changes in v106.

I install your integration via hacs,

then in the ui-lovelace.yaml I insert:

preloader:
  - atomic-calendar

and it should then pre-load that card and it should work again?

It won’t work for cards like that, since that appears to be affected by the change introduced in 0.106 where the card config is read-only (errors like “Cannot assign to read only property”). I don’t think this issue can be fixed without changes to the cards themselves.

Lovelace Card Preloader is designed for the changes in 0.107 (originally planned for 0.106) where the standard cards are only loaded when needed. For example, if you have something like this:

type: 'custom:vertical-stack-in-card'
cards:
  - type: conditional
    ...

In 0.107 this may result in an error like “Custom element doesn’t exist: hui-conditional-card”.
With the Lovelace Card Preloader installed, this can be fixed by adding

preload:
  - conditional

which will preload the conditional card when the page loads

Ok, thanks for the clarification.

@Steven_Rollason, what is the difference between your preloader and the workaround by balloob?

The workaround by balloob would need the JavaScript to be updated if you want to add a new card to preload (which also means you need to deal with caching). Mine is actually based on that code, but picks the cards up from the Lovelace configuration so you can more easily add cards (particularly if you use storage mode for Lovelace).

1 Like

I just tried to install this a HACS custom repository and thee was an error that said it might not be HACS compliant.

Just an FYI.

I just tried it and it worked for me without any warning on HACS 0.23 (I was previously on HACS 0.22.3 and I believe it was working on that as well). Double check that you are adding the correct URL, since the only way I got a warning to appear was when I accidentally put in the URL of a repository which was already there as a default repository).

I just tried again with the same result.

here is the custom repo entry:

and here is the error:

ex1

I don’t know if it’s a HACS error or something with your repo. I’m running HACS v0.23.0 as well.

I’ve just been able to reproduce the issue. Try re-adding the repo without the forward slash on the end of the URL, it looks like that confuses the GitHub API.

yeah, that seemed to be the issue.

I don’t think i ever had to worry about removing that before. I just copied whatever the address was that was in the address bar and it always worked.

Thanks!

Installed in 0.107.0b0 and WORKS! Thanks @Steven_Rollason :+1:

1 Like

I’m still on 0.106.6 and am seeing this error:

ERROR (MainThread) [frontend.js.latest.202001303] https://<redacted>.duckdns.org/hacsfiles/lovelace-card-preloader/lovelace-card-preloader.js:1:1056 TypeError: window.loadCardHelpers is not a function

Config:

preload:
  - conditional
  - entities
  - glance
  - history-graph
  - horizontal-stack
  - markdown
  - picture-entity

That’s odd, that should still work in 0.106 - I tested it successfully myself on 0.106.6.
The only difference I’ve noticed between running this in 0.106 and 0.107 is that some cards (such as markdown) don’t give the config errors in 0.107 as they do in 0.106 (presumably a default config is being used for those cards in 0.107) but everything else seems identical.

hmm, updated to 107.0 , i also now added the plugin with hacs
i added this code to the top of my ui-lovelace.yaml file

preload:
  - picture-elements

but still receive this error:

Custom element doesn't exist: hui-picture-elements-card.

this is my config:

  - type: horizontal-stack
    cards:      
      - !include ../includes/blank-card.yaml
      - type: custom:decluttering-card
        template: person
        variables: 
          - name: fabio
....

my template:

card:
  type: picture-elements
  style: |
    ha-card {
      border-radius: var(--border-radius);
      overflow: hidden;
    }
  image: '[[image]]'
  elements:
    - type: image
      entity: person.[[name]]
      image: '[[image]]'
.....

Same issue as @pergola.fabio but I’m unable to find the lovelace card preloader in HACS.