Delays to cards using card-mod

Configuration Frontend
1

Hi

Has anyone experienced (or solved) delays when displaying dashboard with card-mod edits on them

I have set up a dashboard (menu) which leads to 8 other dashboards via simple button card entries these cards have no entities but have dashboard url’s set up in navigation.
Each subordinate dashboard has a similiar card marked return which takes you back to the menu

I have used card-mod to set each button to a different colour.

Intermittently (too often) and especially at login/ first use the menu card does not display any colours.
If I navigate to any aubordinate dashboard and return, the colours appear and the dashboard then works as expected.

Is there something I need to do to avoid a time-out or force the colour render or ??? to overcome this ?

Thanks

2

Hi,

I don’t realy know if my cardmodded button cards do react the same because they are (when opening a dashboard) hidden in a expender card.
BUT, all my expender cards have a cardmod config (transparent etc.) and I do not see any delay’s on initial load of a dashboard.

card_mod:
  style: |
	ha-card {
	  background: none;
	  box-shadow: none;
	  border: none;
	}

What cardmod code do you use? Like the below?

card_mod:
  style: |
	ha-card {
	  color: red;
	  background-color: rgba(180, 35, 35, .1);
	}
3

Yep.
Pretty much the same ……

show_name: true
show_icon: true
type: button
tap_action:
  action: navigate
  navigation_path: http://192.168.4.5:8123/kitchen-2
grid_options:
  columns: full
  rows: 2
show_state: true
color: none
name: Living Room
card_mod:
  style: |
    ha-card {
      background: #33d6ef;
      box-shadow: none;
      font-size:30px !important;
      font-weight: bold;
    }

…

Six cards like this on the front page …….
LR living room
Kitchen
Shed etc etc
4

I can’t reproduce with your code on my fully populated dashboard. Testen in firefox and Android app.
Maybe browser cache? Other dashboard load?

5

Thanks for checking.

I get the same issue on two devices
Iphone/ios 26.2 and accessing ha using Edge
Sonoff NS Panel pro @V4.2.2 using the web page config, so Im convinced its a ha issue - although it might still be as result of over-loading by either my yaml coding or server cache-ing.

I have a dedicated user that logs in on the panel, with admin rights but use the admin user to log in the iphone. I dont get any card-mod errors in the logs.

Github AI points at
“ This issue appears to be related to how card-mod applies custom styles to your dashboard elements. The delay in rendering the colors on your menu cards is likely due to either the timing of the customizations being applied or the way Home Assistant processes the dashboard and caches changes.”

Im still working my way theough the proposed solutions ……

6

Check out the latest Performance improvements in README. If you are not using extra_module_url then you may get better outcomes, as card-mod is then loaded as a module which is very early in dashboard loading, rather than as a resource script which is late loading, which means elements may be missed as they are loaded before card-mod is loaded. This is likely given the slower perofrmance of the NS Panels. If you are (or will) use extra_module_url make sure you follow all the commendations or you may have card-mod loaded twice which can cause other issues. Once you follow through recommendations, if you are using Companion app, its best to use debugging menu to clear caches.

1 Like
7

Thanks - a lot to read, and can’t get at it today.
I’ll work through and let you know if it helps.