Card-Mod works very slowly. Style overrides are visible

[kosmaluk]

My Home Assistant version: 2024.8.2 HAOS 12.3 Dell Optiplex 8GB RAM Disc 256MB

My lovelace configuration method (GUI or yaml): GUI

I'm using card-mod 3.4.3. I have it installed as a resource and as an extra_module. For some time now, you can see with the naked eye how code changes saved in the card_modu style are being loaded. The styles are changed in each card separately. I don't use themes. The card style change is very slow and visible. There is a slight improvement after saving cookies, but it is still visible

What I am doing:

I uninstalled and reinstalled card_mod, cleared caches in both Chrome and the companion app on Android, and nothing changes. Also after adding extra_module in configuration.yaml. There is still a delay

What I expected to happen:

Previously, the operation of card-mod was immediate, almost imperceptible to the eye and certainly not so slow. He would expect the card style to change quickly and unnoticeably

What happened instead:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
       
        type: custom:mushroom-title-card
        title: __________  STEROWANIE  ___________
        subtitle: ''
        card_mod:
          style: |
            ha-card {
               --title-font-size: 1.0rem;
               --title-spacing: 0rem;
               --title-padding: 0.5rem;
               --title-color: grey;
               --title-line-height: 12px;
               text-align: center;
               border: none;
               box-shadow: none;
               background: rgba(0,0,0,0);
               margin-top: 0rem;
               margin-bottom: 0rem;
            }
# End of code

Error messages from the browser console:
The system does not show any errors

Record_2024-08-29-14-09-43.mp4

By putting an X in the boxes ([]) below, I indicate that I:

• [] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [] Have made sure I am using the latest version of the plugin.

• [] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[Socio241]

Same for me.
I have reduced some top- and bottom-margins in a theme to get everything fitted on my tablet screen.
With card-mod 3.4.3 everytime the screen turns on I can see the contents of the dashboard being shifted down and up again once the margins are applied.
After reverting to 3.4.0 it works much better, most of the time no shifting is visible at all.

[rubin110]

Most likely related to or the same as #354 and #359.

[jonlanceley]

I have this happening on different devices but very noticeable on an NS Panel Pro which after a short time makes button presses very long to the point the whole browser stops responding.
Tried everything, taking different card mod uses out but couldnt isolate the problem.
Downgrading from 3.4.3 to 3.4.0 helps but still happened eventually.

Removing card mod entirely and the browser is back responding as it should be. Im running latest HA update too.

3.4.0/.1/.2 used to work fine so probably something HA related interfering now.
Unfortunately my only option is to abandon card mod for now

[kakou-fr]

same problem, really slow and blocking with 3.4.3.
really better (not not like previous version) with 3.4.0 and no blocking

[ChristopheKoeck]

Same problem for me.
I'm on HA 2024.11.2 and cardmod 3.4.3
I only have 1 or 2 cards that use cardmod and i can clearly see the pages load with original content and then the cardmod styling gets applied.
This happens in the HA Android app and in a browser window

[rubin110]

What type of install do you all have? I'm in a Docker container.

[ChristopheKoeck]

What type of install do you all have? I'm in a Docker container.

I'm running HAOS on a little Beelink computer

[jonlanceley]

Home assistant green

[reidprichard]

I'm having the same problem. In many cases the slow loading is subtle enough to go unnoticed, but for significant styling changes large portions of the screen flash as styles are overridden.

It's disruptive enough that I'm pursuing making a custom version of the primary card I modify, but I'm finding that my basic HTML/CSS/JS skills are lacking for something of this complexity.

[ChristopheKoeck]

For me it's so bad that I can clearly see the change even with the most basic styling.
I see it when I use the first example where they just change the text color of the entities to red

[ildar170975]

Why not asking in the mushroom repo instead?
Seems that 95% of “slow and freezing” issues here are related to mushrooms.

[reidprichard]

Can't speak for @ChristopheKoeck, but I'm not using mushroom cards.

[ildar170975]

@reidprichard
Hard to guess since majority of users here merely saying “me too” without giving any details (not to mention posting a short MWE).

[reidprichard]

I ended up rewriting the card in question, but I'm happy to help debug. It's hard to make a very minimal example since it seems to get worse or more noticeable as complexity increases, but here's my best attempt.

type: history-graph
entities:
  - entity: sensor.outside_temperature
card_mod:
  style: |
    ha-card {
      --card-background-color: red;
      --secondary-text-color: blue;
      --ha-card-border-width: 0px;
      padding: 0px !important;
      font-size: 25px !important;
    }

When you reload the page, you can see the whole card flash as the background changes to red and the font changes to blue, and you can see the entity name grow to the new size. You could further minify the example by removing some of the style overrides, but the less that is changed the less noticeable the effect is.

This is admittedly minor for a single isolated card, but as things get nested and stacked, and changes to e.g. padding cause card size to change, it can be pretty obtrusive.

[ChristopheKoeck]

Same for me, not using mushroom cards.

Some more info about my setup.
Running HAOS on a Beelink with n100 processor and 16gb ram
I'm running version 2024.12.3 of HA Core and Cardmod 3.4.3
I installed cardmod via HACS and added the following code to my configuration.yaml

frontend:
  extra_module_url:
    - /local/community/custom-brand-icons/custom-brand-icons.js
    - /local/community/lovelace-card-mod/card-mod.js
  themes: !include_dir_merge_named themes

I've copied the following code from the cardmod github to see if this would work, but even with this simple code i can see the styling being applied after load:

type: entities
entities:
  - light.living_room_fan_lights
  - light.kitchen_fan_lights
  - light.bedroom_fan_lights
card_mod:
  style: |
    ha-card {
      color: red;
    }

I've added a video from the HA companion app showing the effect when going to the view for the first time

screen-20241216-120200.mp4

[rubin110]

So I've re-enabled card-mod through adding in the frontend extra module lines. I've done this after nailing down another issue that was causing massive slow-downs of HA through the Google Calendar integration.

I'm curious does anyone see any "hasn't responded for 10 seconds" errors in their logs with debug turned on via...

homeassistant:
  debug: true

This round of running card-mod I haven't seen as much of the "pop-in" issue or page load slowdown, although some of it is still there.

[ildar170975]

@ChristopheKoeck

I've added a video from the HA companion app showing the effect when going to the view for the first time

On first load, some time is needed to build a page. How fast - depends on a client. Yes, every new HA version may add more complexity, more resources to be loaded - so a device slowly but surely is degrading.

[ChristopheKoeck]

@ChristopheKoeck

I've added a video from the HA companion app showing the effect when going to the view for the first time

On first load, some time is needed to build a page. How fast - depends on a client. Yes, every new HA version may add more complexity, more resources to be loaded - so a device slowly but surely is degrading.

Seems fair, i just didn't think it would be with something as simple as just changing the color of text.
It also happens every time I go to a different dashboard and come back to it later. It happens all the time in a browser when i come back to the view. It's jarring and i'm just confused that so many people use card_mod and they don't seem to mention any of these problems. That's why i assumed i'm doing something wrong

[ildar170975]

also happens every time I go to a different dashboard and come back to it later

In my experience, if a page is “built”, there are no transition effects after opening a tab.
Again, depends on a browser and loaded resources; using JS templates by cards which supports them (config-template-card, button-card, apexcharts, …) also takes some cpu time.

Also, (unrelated to your case) there are plenty of threads here like “card-mod freezes my UI” from mushroom-addicted users; and the author of mushrooms warned users from using card-mod since mushrooms are highly customizable and card-mod is not needed in most cases; since these cards with a rich functionality require resources, using card-mod causes additional load and may cause freezes.