search

thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.04k stars 169 forks source link

Cards Loading Slower in card-mod 3.4.1 #346

Open Anashost opened 5 months ago

Anashost commented 5 months ago

My Home Assistant version:

2023.12.4 / 2024.1.2

My lovelace configuration method (GUI or yaml):

GUI

What I expected to happen:

how card used to load in Card-mod 3.4.0

What happened instead:

how cards are loading in Card-mod 3.4.1 same issue in android HA app and browser (tested chrome/ brave)

Minimal steps to reproduce:

yaml of the cards above:

Note: the slowness is only visible in a crowded page.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
       {% if is_state('group.office_lights', 'on') %}
       background: rgba(255, 152, 0, 0.1);
       {% endif %}
      }
mode: vertical
keep:
  outer_padding: false
cards:
  - type: custom:mushroom-template-card
    card_mod:
      style:
        mushroom-shape-icon$: |
          @keyframes ping {
            0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
        .: |
          mushroom-shape-icon {
            --icon-size: 76px;
            display: flex;
            margin: -20px 0px 0px -20px !important;
          }
          ha-card {
            clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
          }
    primary: Office
    secondary: ''
    icon: mdi:bed
    layout: horizontal
    entity: group.office_lights
    icon_color: |-
      {% if is_state('group.office_lights','on')%}
       amber
      {%endif%}
    tap_action:
      action: navigate
      navigation_path: office
    hold_action:
      action: toggle
    double_tap_action:
      action: none
    badge_color: ''
    badge_icon: ''
    fill_container: true
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: none
        state:
          - operator: default
            color: grey
          - value: 'on'
            color: orange
        icon: mdi:lightbulb-group
        entity: group.office_lights
        styles:
          icon:
            - width: 19px
          grid:
            - position: relative
          custom_fields:
            notification:
              - border-radius: 50%
              - position: absolute
              - left: 50%
              - top: 3%
              - height: 20px
              - width: 20px
              - font-size: 10px
              - line-height: 20px
              - font-weight: bold
          card:
            - border-radius: 50%
            - width: 40px
            - height: 40px
        custom_fields:
          notification: |
            [[[
               if (states['sensor.office_lights_of_count'].state == '0')
                return ' '
               return `${states['sensor.office_lights_of_count'].state}`
            ]]]
        name: ' '
      - type: custom:button-card
        state:
          - value: 'on'
        icon: mdi:thermometer
        entity: sensor.office_temperature
        styles:
          icon:
            - color: |
                [[[
                    return `${states['sensor.office_temp_color'].state}`
                ]]]
            - width: 15px
            - position: relative
            - top: 4px
            - right: 12px
          card:
            - border-radius: 80%
            - width: 40px
            - height: 40px
          name:
            - color: white
            - font-size: 10px
            - position: relative
            - bottom: 10px
            - left: 5px
            - font-weight: bold
        name: |
          [[[
            if (states['sensor.office_temperature'].state == 'unknown')
             return '-'
            return `${states['sensor.office_temperature'].state}°`
          ]]]

Error messages from the browser console:

none

ildar170975 commented 5 months ago

300 lines of code is not a minimal working example. Besides, 3 custom cards here...

Anashost commented 5 months ago

300 lines of code is not a minimal working example. Besides, 3 custom cards here...

yaml reduced

ildar170975 commented 5 months ago

(unrelated to the issue):

return `${states['sensor.office_lights_of_count'].state}`

should be just

return states['sensor.office_lights_of_count'].state;

And in JS it is needed to use ";" in places like this:

            if (...)
             return '-'
            return `${states['sensor.office_temperature'].state}°`
Anashost commented 5 months ago

@ildar170975 It's working fine the way I've configured it.

Doing this:

should be just

return states['sensor.office_lights_of_count'].state;

Resulted an error: Screenshot_20240108_192947_Home Assistant

ildar170975 commented 5 months ago

It's working fine the way I've configured it.

Not gonna convince you. But check the docs, ask in button-card threads etc. The major thing is that to sort out any issues with card-mod you should have cleared all your other code first.

Anashost commented 5 months ago

Sorry i don't mean you're wrong, but it didn't work that way for me, i made those cards over a year ago, so maybe card-mod/button-card changed a little over time.

ildar170975 commented 5 months ago

The things I were talking about are only button-card-related. To sort out any problems we need to simplify/localize/exclude any other options.

Button-card is at least 3 years same in part of JS...

Anashost commented 5 months ago

Ive just edited my comment

Anashost commented 5 months ago

You're right, but i thought if the card works and no errors in HA or in browser inspection, then everything is alright 🤔

ildar170975 commented 5 months ago

then everything is alright

unfortunately, could be not in general.

Anashost commented 5 months ago

Yeah, sometimes it's a pain to debug some issues.

For now i will stick to version Card-mod 3.4.0 as it doesn't lead to slowness in rendering the card and icons. Hopefully others may notice similar issue to mine and report to get it fixed.

tieskuh commented 5 months ago

I experience the same with card-mod 3.4.1+ I can now see the style being applied. Before it was instant. I might be that the page loads faster now, but with 3.4.1+ I see some cards changing after the page loads.

I'm using card-mod with the minimalist theme/button-card.

Anashost commented 5 months ago

Yeah, it's s mostly the icons and buttons like button-card that are taking longer to load, and make loading feels laggy.

ASNNetworks commented 5 months ago

Same issue here. I use mod-card to have a fixed height and background color of layout card (which doesn't have card element itself, so need mod-card). I use it to create my own header card. It loads up and in a splitseconds I see it get the correct size. Definitely a noticeable downgrade and looks horrible when switching from tabs. I reverted back to 3.4.0, which works normal.

I hope this can get fixed.

kosmaluk commented 5 months ago

Zainstalowałem wersję 3.4.2 i nadal karty ładują się z opóźnieniem. Powrót do 3.4.0 powoduje normalne działanie. Oczekujemy poprawki. Pozdrowieenia

walk0080 commented 4 months ago

Similar issues here.

card-mod 3.4.2 is significantly slower to load. On some older devices (Android eReader, iPad mini 4 and iPad Air 2), about 1/3 of mushroom cards do not load with formatting and the HA app (or browser) hangs for extended periods of time, making them unusable. Moving back to card-mod 3.4.0 helped significantly.

Occasional performance issues w/ 3.4.2 seen even on higher powered devices, e.g. iPad Pro M2, MacBookAir13" 2020 and iPhone 12 Pro Max.

Anashost commented 4 months ago

So, the devs are aware? Or not enough people effected by this issue yet!!

kosmaluk commented 4 months ago

many people have this symptom, but they don't write like in the book of condolence when they see that the error has already been reportedSent from Android device12 lut 2024 06:30 Anashost @.***> napisał(a): So, the devs are aware? Or not enough people effected by this issue yet!!

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

kakou-fr commented 4 months ago

Same issue, too slow, don't open correctly, can pass in edit mode. Come back to 3.4.0 and no more issue.

myB0B commented 4 months ago

Same problem, somethime very slow with 3.4.1

Cheerpipe commented 4 months ago

Confirm, rolling back to 3.4.0 works as a workaround.

v.3.4.3 restored pre v3.4.1 performance levels.

Thanks for keep this amazing and unique project alive.

joeidea commented 3 months ago

I also experience this, where I can see card-mod changes being drawn. This is with card-mod 3.4.2, HA running in Windows 11 Hyper-V (on a relatively fast AMD Ryzen 5 PRO 3400GE w/ Radeon Vega Graphics 3.30 GHz). Ideally, if possible,, inserting a 250ms delay (or selectable delay) before presenting the GUI would solve this. I suspect this is difficult/impossible to tell the HA code above you to do this; just sharing my thoughts.

Sample/Screenshot:

Screenshot 2024-03-10 153301

My relevant Theme yaml code (don't think indentation is showing properly; but this is indented and works) :

` card-mod-theme: "iFone Dark" card-mod-card-yaml: | .: | ha-card.type-entities { background: transparent; # var(--x-stealth-color), "inheriting" mod-card bg box-shadow: none; border-width: 0px; border-color: transparent; border-radius: var(--x-border-radius); } ha-card.type-entities .card-header { display: block; font-size: 14px;

background: black;

    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0px 0px 0px 20px;
    color: rgb(148, 150, 148);                      # text-medium-color is rgb(128, 130, 138)
  }
  .entities-title {
    background: black !important;
    border-radius: 0px !important;
  }
  .entities-creep-up {
    margin-top: 0px;                                # edge up to neighbor
  }
  ha-card.type-custom-mod-card {
    background: var(--ha-card-background);
    height: var(--x-grid-height);
    width: var(--x-grid-width);
    border-radius: var(--x-border-radius);
    margin-top: -22px;                              # pull up to touch/cover entities-title
  }

card-mod-row-yaml: | .: | :host { display: block; height: 38px; margin-top: -4px; border-bottom: 2px solid var(--divider-color); } :host(.firstrow) { margin-top: -12px; } :host(.lastrow) { border-bottom: 0px; margin-bottom: -12px; } :host(.ipsensor) { margin-top: -12px; border-bottom: 4px solid var(--divider-color); --card-mod-icon-color: var(--x-icon-neutral-color); }

`

Card code:

`type: vertical-stack cards:

Joe

Montreal666 commented 2 months ago

I also experience this, where I can see card-mod changes being drawn. This is with card-mod 3.4.2, HA running in Windows 11 Hyper-V (on a relatively fast AMD Ryzen 5 PRO 3400GE w/ Radeon Vega Graphics 3.30 GHz). Ideally, if possible,, inserting a 250ms delay (or selectable delay) before presenting the GUI would solve this. I suspect this is difficult/impossible to tell the HA code above you to do this; just sharing my thoughts.

Sample/Screenshot:

Screenshot 2024-03-10 153301

My relevant Theme yaml code (don't think indentation is showing properly; but this is indented and works) :

` card-mod-theme: "iFone Dark" card-mod-card-yaml: | .: | ha-card.type-entities { background: transparent; # var(--x-stealth-color), "inheriting" mod-card bg box-shadow: none; border-width: 0px; border-color: transparent; border-radius: var(--x-border-radius); } ha-card.type-entities .card-header { display: block; font-size: 14px; #background: black; text-transform: uppercase; letter-spacing: 0.04em; padding: 0px 0px 0px 20px; color: rgb(148, 150, 148); # text-medium-color is rgb(128, 130, 138) } .entities-title { background: black !important; border-radius: 0px !important; } .entities-creep-up { margin-top: 0px; # edge up to neighbor } ha-card.type-custom-mod-card { background: var(--ha-card-background); height: var(--x-grid-height); width: var(--x-grid-width); border-radius: var(--x-border-radius); margin-top: -22px; # pull up to touch/cover entities-title } card-mod-row-yaml: | .: | :host { display: block; height: 38px; margin-top: -4px; border-bottom: 2px solid var(--divider-color); } :host(.firstrow) { margin-top: -12px; } :host(.lastrow) { border-bottom: 0px; margin-bottom: -12px; } :host(.ipsensor) { margin-top: -12px; border-bottom: 4px solid var(--divider-color); --card-mod-icon-color: var(--x-icon-neutral-color); }

`

Card code:

`type: vertical-stack cards:

  • type: entities entities: [] show_header_toggle: false title: Sockets (various) card_mod: class: entities-title
  • type: custom:mod-card card: type: vertical-stack cards:
    • type: entities show_header_toggle: false state_color: true card_mod: class: entities-creep-up entities:
    • entity: switch.xmas_tree_mss110_main_channel icon: mdi:power-socket-us name: Xmas Tree card_mod: class: firstrow
    • entity: switch.mantle_mss105_main_channel icon: mdi:power-socket-us name: Mantle
    • entity: switch.gumball_plug_mss110_main_channel icon: mdi:power-socket-us name: Gumball Socket
    • entity: switch.smart_plug_mini_mss105_main_channel icon: mdi:power-socket-us name: Hall Table
    • entity: switch.roku_streambar_mss105_main_channel name: Roku Streambar icon: mdi:soundbar
    • entity: switch.treadmill_fan_socket_mss110_main_channel name: Treadmill Fan icon: mdi:fan card_mod: class: lastrow ` Thank you,

Joe

are you still having issues and using 3.4.0 as a workaround or is it fixed for you with 3.4.3 ? here 3.4.0 seems to perform better than 3.4.3. thx

joeidea commented 2 months ago

I still see a delay with 3.4.3; but this is no longer an issue for me. I changed the way I'm using theme constants. It is fast enough. Thank you!

Montreal666 commented 2 months ago

I changed the way I'm using theme constants.

Thank you. May I ask: what have you changed in the way you are using theme constants?

joeidea commented 2 months ago

Yes, of course. I was setting values in my theme yaml, for example, card-mod-card-yaml: | .: | ha-card._wrapped_.type-entities { border-radius: var(--x-border-radius); text-transform: uppercase; font-size: 16px; !important; } This seemed ideal to me (centralized control).

Now, instead, I set the constant values in my theme yaml, and use them in the card. I notice this is faster. Examples follow.

Tn the theme yaml file: x-header-line-height: 24px x-header-text-transform: uppercase In the card: ` - type: custom:button-card color_type: label-card show_icon: false show_name: true show_label: false name: '[[title]]' styles: card:

Thank you,

Joe