Card-mod unusable? It slows everything down so much?

deanfourie · February 13, 2025, 11:52am

Basically as the title says, for years now I have avoided using card-mod as it literally just renders my dashboard unusable. It can take like a minute to load my dashboard, trying to navigate the dashboard is extremely and painfully slow and unresponsive.

If I switch out of my HA tab, and then back in, it just doesn’t load, its just white. Maybe caching?

I dont know why this is and I feel like I am missing out on some cool shit with card-mod. I am using the Material Rounded Dark Theme.

Any ideas? I have something I want to do with card-mod now.

Thanks

tom_l · February 13, 2025, 12:04pm

This is certainly not the behaviour I and many others experience.

Please share the card-mod config you are using.

Also there are many debugging tools available in the web browser inspector that may assist with debugging this.

LiQuid_cOOled · February 13, 2025, 12:08pm

I would think it’s theme related and not card_mod related. I use an extensive amount of card_mods with no issues. I would suggest switching away from the theme and see if you have the same issues.

If still an issue, work through each card that has card mod has added to see if you can identify a specific card.

Make backups of your lovelace configs and ensure they are downloaded to a PC so it’s easy to restore the code.

This would help us assist greatly

deanfourie · February 13, 2025, 12:26pm

Thanks, I am trying this person card, with background fill effect to indicate battery %. I am also using multiple, maybe around 20 animated mini-graph-cards.

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.dean
    layout: vertical
    icon_type: entity-picture
    secondary_info: state
    fill_container: true
    badge_icon: mdi:home
    badge_color: green
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(
            20deg, 
            rgba(173, 216, 230, 0.3) {{ states('sensor.iphone_battery_level')|int(0) }}%, 
            rgba(0, 0, 0, 0.05) {{ states('sensor.iphone_battery_level')|int(0) }}%
          ) !important;
          border-radius: 15px;
          color: white;
        }
  - type: custom:mushroom-person-card
    entity: person.john
    layout: vertical
    icon_type: entity-picture
    secondary_info: state
    fill_container: true
    badge_icon: mdi:home
    badge_color: green
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(
            20deg, 
            rgba(173, 216, 230, 0.3) {{ states('sensor.sm_g991b_battery_level')|int(0) }}%, 
            rgba(0, 0, 0, 0.05) {{ states('sensor.sm_g991b_battery_level')|int(0) }}%
          ) !important;
          border-radius: 15px;
          color: white;
        }
  - type: custom:mushroom-person-card
    entity: person.jim
    layout: vertical
    icon_type: entity-picture
    secondary_info: state
    fill_container: true
    badge_icon: mdi:home
    badge_color: green
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(
            20deg, 
            rgba(173, 216, 230, 0.3) {{ states('sensor.iphone2_battery_level')|int(0) }}%, 
            rgba(0, 0, 0, 0.05) {{ states('sensor.iphone2_battery_level')|int(0) }}%
          ) !important;
          border-radius: 15px;
          color: white;
        }

type: custom:mini-graph-card
entities:
  - entity: sensor.house_temperature
name: House Temp
show:
  extrema: true
  average: true
  graph: true
  labels: true
hour24: false
hours_to_show: 48
color_thresholds:
  - value: 23
    color: "#64B5F6"
  - value: 24
    color: "#F39C12"
  - value: 35
    color: "#E74C3C"
animate: true
card_mod:
  style: |
    .graph .graph__container .graph__container__svg svg g mask .line {
      animation-duration: 5s !important;
      animation-delay: 0s !important;
      animation-timing-function: linear !important;
      animation-iteration-count: infinite !important;
    }

deanfourie · February 13, 2025, 12:33pm

Also, according to the themes github page, there is a Material Rounded No Mod Dark option.

Both themes implement Material Design 3 redesigns of elements when possible using card-mod. If you have card-mod installed and do not the component redesigns, use the “No Mod” versions of this theme.

LiQuid_cOOled · February 13, 2025, 12:49pm

The card mod code look ok at first glance. You are blasting your dashboard with this infinite graph animation that has a zero delay setting.

I still am leaning towards the theme. I can do some testing with the Material Rounded Dark Theme. There may be conflicts with card_mod based off what you just posted. I avoid themes for the most part.

I

NathanCu · February 13, 2025, 1:19pm

Agree. When a theme dev calls out or points out different versions specifically because of a component… There’s definitely something worth looking at.

Even so. Once that’s resolved… I’d be more concerned with mini graph (pulling 48hr history on multiple entities) x20 than Card-mod at this moment. I believe they all have to gather data and paint before they render…

I avoid graphs and cameras for performance reasons to start with and op has 20…

So while I’m sure it looks cool. I bet you have more than one performance issue to address, op.

tom_l · February 13, 2025, 2:10pm

I have pages of nothing but graphs. I have to scroll to see them all. They load quickly. However I am using Apexcharts to plot 5 minute statistics, not state data.

Harry-1976 · February 13, 2025, 3:02pm

I’ve used these square mushroom cards for quite some time:
afbeelding
These (standard themed) cards use card mod extensively. Because the dashboard became irresponsive in relatively short time on my browser i decided to take a look into bubble cards.

To make them look like mushroom cards i have to use quite some card mod styling too but somehow i don’t face the freezing issues i had with my previous dashboard. Difference is night and day.

So wether it’s the combination with other elements or just coincidence, i did have issues with card mod that now are gone.

reylinux · March 17, 2025, 8:38pm

I also had the quite similar behavior like the OP. I use card-mod extensively, see below for some reference.

however switching to Material You No Mod theme solved the issue for me. I still don’t understand how it fixed the issue, but it’s running fast again!