Sometimes card not loaded

[Salsalove]

Sometimes the card is not loaded and I need to reload the page several times to be able to see it. Any fix?

[Salsalove]

This is an exemple:

type: custom:stack-in-card
mode: horizontal
card_mod:
  style: |
    ha-card {
     box-shadow: none;
     background-color: {%- set sensor = states('alarm_control_panel.aqara') %} 
                {%- if sensor == 'triggered' %}rgba(255, 70, 70, 0.8)
      {%- else %}rgba(33, 41, 46, 0.4)
      {%- endif %} 

      }
cards:
  - type: custom:button-card
    entity: script.perimetriale
    show_state: false
    show_name: true
    name: Perimetro
    aspect_ratio: 1/1.15
    layout: vertical
    icon: |
      [[[
        if (states['alarm_control_panel.aqara'].state == 'triggered'){
          return `mdi:bell-ring-outline`}
          return 'mdi:shield-moon-outline'
      ]]]
    styles:
      icon:
        - animation: |
            [[[
              if (states['alarm_control_panel.aqara'].state == 'triggered'){
                return `blink 1s ease infinite`}
            ]]]
        - color: white
        - width: 45px
        - place-self: center
      card:
        - border-radius: 20px
        - box-shadow: none
        - background: none
        - padding: 10px
        - border: none
      img_cell:
        - background-color: |
            [[[
              if (states['alarm_control_panel.aqara'].state == 'armed_home'){
                return `rgba(254,209,90,0.8)`}
                return 'rgba(33, 41, 46, 0.2)'
            ]]] 
        - border-radius: 50%
        - place-self: center
        - width: 55px
        - height: 55px
        - margin-top: '-8px'
      name:
        - color: white
        - align-self: center
        - justify-self: center
        - font-weight: bold
        - font-size: 10px
        - margin-left: 1px
        - margin-bottom: 0px
    tap_action:
      action: call-service
      service: script.perimetriale
  - type: custom:button-card
    entity: script.uscita
    show_state: false
    show_name: true
    name: Uscita
    aspect_ratio: 1/1.15
    layout: vertical
    icon: |
      [[[
        if (states['alarm_control_panel.aqara'].state == 'triggered'){
          return `mdi:bell-ring-outline`}
          return 'mdi:shield-home-outline'
      ]]]
    color: rgb(248, 83, 68)
    styles:
      icon:
        - animation: |
            [[[
              if (states['alarm_control_panel.aqara'].state == 'triggered'){
                return `blink 1s ease infinite`}
            ]]]
        - color: white
        - width: 45px
        - place-self: center
      card:
        - border-radius: 20px
        - box-shadow: none
        - background: none
        - padding: 10px
        - border: none
      img_cell:
        - background-color: |
            [[[
              if (states['alarm_control_panel.aqara'].state == 'armed_away'){
                return `rgb(248, 83, 68)`}
                return 'rgba(33, 41, 46, 0.2)'
            ]]] 
        - border-radius: 50%
        - place-self: center
        - width: 55px
        - height: 55px
        - margin-top: '-8px'
      name:
        - color: white
        - align-self: center
        - justify-self: center
        - font-weight: bold
        - font-size: 10px
        - margin-left: 1px
        - margin-bottom: 0px
    tap_action:
      action: call-service
      service: script.uscita
  - type: custom:button-card
    entity: script.disarma
    show_state: false
    show_name: true
    name: Disarmato
    aspect_ratio: 1/1.15
    layout: vertical
    icon: |
      [[[
        if (states['alarm_control_panel.aqara'].state == 'triggered'){
          return `mdi:bell-ring-outline`}
          return 'mdi:shield-off-outline'
      ]]]
    styles:
      icon:
        - animation: |
            [[[
              if (states['alarm_control_panel.aqara'].state == 'triggered'){
                return `blink 1s ease infinite`}
            ]]]
        - color: white
        - width: 40px
        - place-self: center
      card:
        - border-radius: 20px
        - box-shadow: none
        - background: none
        - padding: 10px
        - border: none
      img_cell:
        - background-color: |
            [[[
              if (states['alarm_control_panel.aqara'].state == 'disarmed'){
                return `rgb(60, 179, 113)`}
                return 'rgba(33, 41, 46, 0.2)'
            ]]]
        - border-radius: 50%
        - place-self: center
        - width: 55px
        - height: 55px
        - margin-top: '-8px'
      name:
        - color: white
        - align-self: center
        - justify-self: center
        - font-weight: bold
        - font-size: 10px
        - margin-left: 1px
        - margin-bottom: 0px
    tap_action:
      action: call-service
      service: script.disarma

[ildar170975]

A humble suggestion - make the card SIMPLER and try to find out a Minimal Working Example to demonstrate the issue.

[kubusiaasty]

Same problem, size of code doesn't matter. Even on simple empty card there is a problem with loading e.g:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bedroom
    secondary: >-
      🌡️ {{states('sensor.bedroom_temp_hu_sensor_temperature')}} °C
      |💧{{states('sensor.bedroom_temp_hu_sensor_humidity')}} %
    icon: mdi:bed
    tap_action:
      action: navigate
      navigation_path: /dashboard-futurehome/bedroom
    hold_action:
      action: none
    icon_color: '{{ ''amber'' if is_state(''light.bedroom_lights'', ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.tv_led
        icon: |
          {% if is_state('light.tv_led','on') %}
            mdi:lightbulb-on
          {% else %}
            mdi:lightbulb-off
          {% endif %}
        icon_color: |
          {% if is_state('light.tv_led','on') %}
            amber
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: toggle
        hold_action:
          action: more-info
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 1px;
        }  
card_mod:
  style: |
    ha-card{
    height: 109px;
    }

[ildar170975]

Same problem, size of code doesn't matter. Even on simple empty card there is a problem with loading e.g:

One more humble suggestion: test with STANDARD cards inside.
Providing a long code with custom cards just makes a job more difficult.

Here is my case:

type: custom:stack-in-card
mode: vertical
cards:
  - type: entity
    entity: sun.sun
  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun

The card is usually displayed in not-Edit mode:

Always displayed in Editor:

And very often is not displayed in Edit mode:

Observed in Win10x64: Chrome, FF
2023.11.2

Probably related to home-assistant/frontend#17266

[ildar170975]

2024.8
I do not observe the issue anymore.