Card-mod Loading Delay in Home Assistant Companion App for iOS

Configuration Frontend
1

Hi everyone,

I’ve been experiencing an issue with the Home Assistant Companion App for iOS. Whenever I switch between Dashboard pages, there’s a brief moment where the original formatting “flashes” before the card_mod modifications are applied. It seems like the card_mod is being loaded slightly later than the original formatting.

This issue is mostly noticeable in the iOS app, and not as much in the web version. Has anyone else encountered this problem? Any suggestions on how to ensure that the modifications are applied without these initial flashes would be greatly appreciated.

Thanks in advance!

2

I know this is super late but if anyone else runs across this, here is a basic answer that should help point you in the right direction:

In short, you are probably not applying your card mod efficiently. Look here for more info on how to optimize card mod loading times.

If you really want to dive into details, this is the best source for everything card mod (also has info on some performance aspects).

Nevertheless, be aware that card mod is basically a method to change the styling of a card after it is generated, not a card itself. As such, you will always have some “flashes” but with smart usage these can be so fast they are hardly noticeable. Of course the processing time will always be longer/slower on older/less-powerfull devices. Remember that the more card mod you apply, the longer it will take to process it, this is unavoidable.

If you really want the card to load correctly right from the start, you’ll probably have more luck with something like the custom button card.

1 Like
3

Thank you for your feedback. I always say better late than never :wink:

I actually looked at your links, but honestly didn’t really understand them directly. Thanks anyway.

That’s what I’m actually doing more and more. I now implement a lot of ideas with the custom:button-card. It is so versatile and powerful that it leaves nothing to be desired.

4

Are you seeing this on IOS with the Sections dashboard?

5

Yes, exactly.

6

Test putting it in a custom: vertical-stack-in-card and see if you get the same results. This isn’t the long term solution I recommend but I want to see if you get better results as I did.

7

Unfortunately, I don’t have custom:vertical-stack-in-card, but I do have custom:stack-in-card. I recorded a video (gif) to illustrate this:

ScreenRecording_09-09-2025 18-37-28_1

The first card is in auto-entities, the second is the normal entities card, and the third is in custom:stack-in-card.

And here is the card mod:

type: entities
card_mod:
  style:
    hui-scene-entity-row$: |
      ha-button {
        display: none;
      }
entities:
  - entity: scene.kuche_kugelleuchte_5_neutral
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge {
            flex: 0 0 36px !important;
            height: 36px !important;
          }
8

Stack in card isn’t going to help. I have to look at the source code, just haven’t had the time.

I dig some more tonight and test android as well.

UPDATE: It’s happening on Android devices too.

If you use the browser on the mobile device, do get the same lag(I do)?

1 Like
9

I think the timing on devices means you may it briefly. If I do repeat tests on desktop I see the occasional flash as well. This is just how card-mod works. As stated earlier by @Roderik you would best to use auto-entities and button-card if you want a deterministic solution without chance of flash of non modded content.

1 Like
10

I sent you a DM, it’s a legit issue IMO.

11

Sometimes it’s best to stand back, work out what you are trying to achieve and see if there may be an alternative solution that does not have any drawback. In this case I believe there is. If card-mod is not working for a scenario, then its likely that even if a magical patchy hack was found, card-mod will likely be chasing rabbits when things change in Frontend (think the infamous version 3.5.0).

12

Yes, for me too.

I have these “flashes” not only with the above example, but also with theme mods, for example.

I don’t even know why it bothers me so much. It’s actually just a small thing, but somehow it really bothers me. That’s why I only use card-mod very little, which is a shame. But I found custom:button-card quite useful. You can use it to recreate almost anything, but only with a lot of code.

I was also interested in whether the error only occurs for me and I am doing something wrong, or whether others also have this and it is due to how card-mod works.

I would like to thank you all very much for addressing this issue. At least I now realize that it’s not necessarily my fault. :pray:t2:

13

Still working on it and it’s not isolated to just the custom:button-card

I am seeing the same error with other custom cards.

Test adding a defined icon and section_mode:true and let me know…

type: custom:button-card
entity: light.xxxx
icon: mdi:xxxxx
section_mode: true
grid_options:
  rows: 2
  columns: 3
14

Oh, I must have expressed myself in a misleading way. I have no problem with the custom:button-card. I use it as an alternative to the standard cards with card-mod. I never use card-mod in custom:button-card because it doesn’t really need it.

That’s right. Sometimes, very rarely, I also have small “flashes” with the mushroom (template) cards. But really rarely.

15

I have no faults with this.

16

Probably my misunderstanding…

17

Now we know what I was trying to say :wink:

18

Thanks again to everyone involved.

To me it looks like we can’t find a solution to this because it’s the principle how card-mod intervenes/ works. That’s why I’m not marking any post as a solution. I hope that’s okay.

1 Like
19

That’s not an issue in my opinion.

20

Yes, no real issue = no solution. Fits.