Button Card - data is stacked/slow loading after page refresh

Third party integrations
1

Hello,

I have issue with button cards, I created 3 and all of them have the same issue. After page refresh, all data on button card is stacked in one place, and it’s taking few minutes to load the card correctly.
image

I don’t think so that this is a problem with HW performance, because I don’t have a lot of devices connected to HA and I didn’t see similar issues with other integrations.

Code for card:

type: custom:button-card
entity: sensor.pralka_ladowana_z_przodu
name: Pralka
show_label: true
state:
  - value: "off"
    label: "OFF"
    styles:
      card:
        - background: black
      name:
        - color: white
      icon:
        - color: white
      grid:
        - grid-template-areas: "\"i i i\" \"n n n\" \"l l l\""
        - grid-template-columns: 1fr
        - grid-template-rows: 40px min-content 1fr
      label:
        - color: white
        - justify-self: start
        - font-size: 16px
        - font-weight: 500
      custom_fields:
        program:
          - display: none
        bar:
          - display: none
        stat1:
          - display: none
        stat2:
          - display: none
        stat3:
          - display: none
styles:
  card:
    - padding: 20px
    - background: >-
        linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(6,99,181,1) 64%,
        rgba(0,212,255,1) 100%)
  grid:
    - grid-template-areas: "\"i program\" \"n stat2\" \"bar bar\" \"stat1 stat3"
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 70px min-content 40px min-content
  name:
    - justify-self: start
    - font-size: 10px
    - opacity: 0.7
  icon:
    - width: 34px
  img_cell:
    - justify-self: start
    - align-self: start
    - width: 34px
    - height: 34px
  custom_fields:
    program:
      - justify-self: end
      - align-self: end
      - padding-bottom: 6px
      - font-size: 16px
      - font-weight: 500
    stat1:
      - justify-self: start
      - font-size: 10px
      - opacity: 0.7
    stat2:
      - justify-self: end
      - font-size: 16px
      - opacity: 0.7
      - padding-bottom: 5px
      - font-weight: 500
    stat3:
      - justify-self: end
      - font-size: 10px
      - opacity: 0.7
    bar:
      - justify-self: start
      - margin-top: "-4px"
      - width: 100%
      - border-radius: 6px
      - background: black
      - height: 12px
custom_fields:
  program: |
    [[[
      return entity.attributes.current_course + ' • ' + entity.attributes.run_state
    ]]]
  bar: |
    [[[
      var state = states['sensor.washing_remain_percent'].state
      return `<div> <div style="background:white; height:
      12px; width: ${state}%"> </div> </div>`
    ]]]
  stat1: "0:00:00"
  stat2: |
    [[[ return entity.attributes.remain_time ]]]
  stat3: |
    [[[ return entity.attributes.initial_time ]]]