Lovelace Dashboard not loading until Refresh

Configuration Frontend
1

Hello!

Since I upgraded to core_2021.11.5 (now currently using core-2022.2.9) I’ve had an issue with my dashboards where none of them load until I manually hit the Refresh button on the menu at the top-right corner – after using the Refresh button, the dashboard loads properly.

Before and After using Refresh

Untitled
Untitled1718×1960 292 KB

The console throws a few errors which don’t really point to anything (seemingly) useful as they link to these 2 pieces of code

// (styles.ts:368:1)
export const baseEntrypointStyles = css`
  body {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
    height: calc(100vh - 32px);
    width: 100vw;
  }
`;

// (hui-root.ts:500:1)
        </app-header>
        <div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
      </ha-app-layout>

Taking a quick look at the code for _debouncedConfigChanged couldn’t find anything that would hint towards what’s going on.

Current setup:

configuration.yaml

lovelace:
  mode: yaml
  resources: !include configuration/resources.yaml
  dashboards:
    desktop-test:
      mode: yaml
      title: desktop
      show_in_sidebar: false
      filename: ui-lovelace-test.yaml

ui-lovelace-test.yaml

views:
  - path: default_view
    icon: 'mdi:weather-partly-cloudy'
    visible:
      - user: some_user_string
    panel: true
    title: ''
    cards:
      - type: custom:mod-card
        card_mod: 
          style: |
            ha-card { 
              display: flex;
              justify-content: center;
            }
        card:
          type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            grid-template-areas: |
              "clock clock clock"
              "forecast gap radar"
            grid-template-columns: "49% 2% 49%"
            grid-template-rows: auto
          cards:
            - type: picture-elements
              view_layout:
                grid-area: clock
              image: /local/images/transparent_clock.png?v1
              style: 
                'hui-image': 
                  '$': |
                    #image {
                      height: 50vh;
                    }
              elements:
              - type: state-label
                entity: sensor.local_time
                tap_action: none
                style:
                  top: 55%
                  left: 50%
                  font-size: 15em
                  font-weight: 100
              - type: state-label
                entity: sensor.local_date
                tap_action: none
                style:
                  top: 85%
                  left: 50%
                  font-size: 2em
                  text-transform: uppercase
                  letter-spacing: 10px
            - type: 'custom:weather-card'
              view_layout:
                grid-area: forecast
              entity: weather.openweathermap
              current: true
              details: false
              forecast: true
              name: Berlin
              style: | 
                ha-card {
                  background: transparent;
                  box-shadow: none;
                  border-radius: 5px;
                }
                ha-card.type-custom-weather-card {
                  padding: 1.3em 0;
                }
            - type: custom:gap-card
              view_layout:
                grid-area: gap
            - type: iframe
              view_layout:
                grid-area: radar
              url: "https://embed.windy.com/embed2.html"

Things I’ve already tried:

  • Updated every single HACS module to the latest version
  • Deleted all cache and Application configs from Chrome
  • Tried on different devices/browsers (this error happens on Android/Fire HD10, Safari and MSEdgde)
  • Deleted the custom themes and used the default one
  • Deleted styles from any of the cards loading
  • Only loaded the dashboard shown on the screenshot and no other one
  • Simplified the view to only have the custom:weather-card alone, same for the iframe card

Any thoughts on what could be going on?

1 Like
2

Were you able to figure this out? I am currently experiencing the same issue.

3

Not entirely, no. I started removing everything from the dashboards, piece by piece, to try and find the issue. Eventually I arrived to what it seems to be 2 separate issues:

  1. The console error (cannot read properties of undefined for “path”) was due to the fact than even though I had the lovelace configuration pointing to ui-lovelace-test.yaml, I still had an old ui-lovelace.yaml file on the config directory, so Hassio seems to pick that dashboard as well by default, even if the configuration.yaml pointed to a different file. So I renamed ui-lovelace.yaml to something else and that fixed the console error.
  2. With the above fixed, now the board loads way more often, but sometimes it still doesn’t. And that seems to be related with hass-lovelace_gen which I’m using to build my dashboards; but I haven’t figured out what’s going on with that yet

Hope that helps!

4

Because I too had problems that HA would load the ui-lovelace dashboard instead of my configured default dashboard at some times I came to the conclusion that there always must be a proper ui-lovelace.yaml dashboard in yaml mode. Once I renamed my actual default dashboard to that I did not experience dashboard problems anymore.

5

wow I can’t believe I missed that once I saw that the old ui-lovelace.yaml was being loaded by default even if it wasn’t specified on the lovelace.dashboards config!

Now that I’ve changed it from filename: ui-lovelace-test.yaml to filename: ui-lovelace.yaml (and updated that dashboard accordingly) it works just fine.

Great catch, cheers!