search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
2.02k stars 57 forks source link

Dashboard slow! #837

Closed Doser86 closed 1 week ago

Doser86 commented 1 month ago

After starting to use pop up on my dashboard it has got extremely slow!

Clooos commented 1 month ago

Hi! This is an issue that I've fixed in the latest v2.3.0-beta.2. You can get it by going on HACS then on the Bubble Card page, then go to the menu, then click on Re-download or something like that, you will see the beta in the dropdown menu.

Tell me if that fix your issue 🤞

floow77 commented 1 month ago

Hi ! I see the same issue with the latest v2.3.0-beta.2. I use many pop-up, about one pop-up for each bubble card. Is it recommended ?

jerome6994 commented 1 month ago

Good evening

then the problem is still present despite version v2.3.0-beta.2

I restarted HA but didn't clear the chrome cache.

I even have difficulty saving following modifications finally when I open a new tab it is saved but the window does not close and runs in a loop

Clooos commented 1 month ago

Can you take a look at your browser console? Do you have any error in it?

jerome6994 commented 1 month ago

hello so I haven't taken the time to look at the F12 console. but I can do it without problem. I have several PCs on different configurations Pro and personal. I want to test on both. the only problem is I have to look for what and where that's where I need your skills because mine are limited and I can only be your hands to look for what you want to see

Doser86 commented 1 month ago

I have only 5, but it is making my tablet with Fully Kiosk extremely slow!

Clooos commented 1 month ago

This is really weird, because I have an old tablet with Fully Kiosk as well and everything run smoothly, that's why any error would help me understand what is happening here.

@Doser86 can you share your YAML so that I try to reproduce this issue?

jerome6994 commented 1 month ago

image

@Clooos Here are the errors I have on one of the two PCs I wanted to test I don't know if this speaks to you! If I have to look elsewhere, tell me, I will. If you want to explore things I can be reached on HACF, Discord etc and in French

Clooos commented 1 month ago

Like the error says, this means that you have some custom templates that are not working correctly, check your templates in your pop-ups and buttons.

jerome6994 commented 1 month ago

I don't see which template doesn't work because everything is functional on the Dasboard! I can try to remove browser_mod popups I don't have any classic error messages in HA

The map in question on the inspected view `type: custom:bubble-card card_type: button name: CH Parents scrolling_effect: false show_attribute: true attribute: brightness tap_action: action: navigate navigation_path: /lovelace/Parents double_tap_action: action: none hold_action: action: more-info button_action: double_tap_action: action: none card_layout: large styles: | .bubble-button-card-container { background: rgba(var(--rgb-secondary-text-color), 0.2) !important; } .bubble-sub-button-1 { background: ${ hass.states['binary_sensor.mvt_ch_parents_occupancy'].state !== 'on' ? '' : 'rgba(203, 79, 64, 0.7)' } !important; color: ${ hass.states['binary_sensor.mvt_ch_parents_occupancy'].state === 'on' ? 'pink' : 'grey' } !important;

} .bubble-sub-button-2 { background: ${ hass.states['binary_sensor.pte_ch_parents_contact'].state !== 'on' ? '' : 'rgba(203, 79, 64, 0.7)' } !important; color: ${ hass.states['binary_sensor.pte_ch_parents_contact'].state === 'on' ? 'pink' : 'grey' } !important; } .bubble-sub-button-3 { background: ${ hass.states['binary_sensor.fen_ch_parents_contact'].state !== 'on' ? '' : 'rgba(203, 79, 64, 0.7)' } !important; color: ${ hass.states['binary_sensor.fen_ch_parents_contact'].state === 'on' ? 'pink' : 'grey' } !important; } .bubble-sub-button-4 { background-color: ${ hass.states['light.ecl_ch_parents_bureau'].state === 'on' ? (hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color ? rgba(${hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color[0]}, ${hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color[1]}, ${hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color[2]}, 0.4) : 'rgba(255, 215, 0, 0.4)') : (hass.states['light.ecl_ch_parents_bureau'].state === 'off' ? '' : 'rgba(255, 165, 0, 0.4)') } !important; color: ${ hass.states['light.ecl_ch_parents_bureau'].state === 'on' ? (hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color ? #${hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color[0].toString(16).padStart(2, '0')}${hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color[1].toString(16).padStart(2, '0')}${hass.states['light.ecl_ch_parents_bureau'].attributes.rgb_color[2].toString(16).padStart(2, '0')} : 'yellow') : 'grey' } !important; } .bubble-sub-button-5 { background-color: ${ hass.states['light.grp_ecl_ch_parents'].state === 'on' ? (hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color ? rgba(${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[0]}, ${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[1]}, ${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[2]}, 0.4) : 'rgba(255, 215, 0, 0.4)') : (hass.states['light.grp_ecl_ch_parents'].state === 'off' ? '' : 'rgba(255, 165, 0, 0.4)') } !important; color: ${ hass.states['light.grp_ecl_ch_parents'].state === 'on' ? (hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color ? #${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[0].toString(16).padStart(2, '0')}${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[1].toString(16).padStart(2, '0')}${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[2].toString(16).padStart(2, '0')} : 'yellow') : 'grey' } !important; } .bubble-sub-button-6 { height: 20px; background-color: ${ (function() { let temperature = parseFloat(hass.states['sensor.temp_ch_parents_temperature'].state); if (temperature < 15) { return 'rgba(70, 130, 180, 1)'; // Bleu froid } else if (temperature >= 15 && temperature < 22) { return 'rgba(93, 157, 82, 0.7)'; // Vert confort } else if (temperature >= 22 && temperature < 25) { return 'rgba(243, 169, 60, 0.7)'; // Orange chaud } else { return 'rgba(203, 79, 64, 0.7)'; // Rouge trop chaud } })() } !important; } sub_button:

Doser86 commented 1 month ago

This is really weird, because I have an old tablet with Fully Kiosk as well and everything run smoothly, that's why any error would help me understand what is happening here.

@Doser86 can you share your YAML so that I try to reproduce this issue?

My whole dashboard yaml? That is long 🤣

Clooos commented 1 month ago

@Doser86 just your Bubble Cards 😁

Doser86 commented 1 month ago

This is the error I get in the console:

66bubble-card.js?hacstag=6801129192302:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList') at X (bubble-card.js?hacstag=6801129192302:1:66093) at te.updateBubbleCard (bubble-card.js?hacstag=6801129192302:1:88784) at set hass (bubble-card.js?hacstag=6801129192302:1:88703) at i.value (hui-card.ts:164:27) at i.performUpdate (reactive-element.ts:1329:14) at i.scheduleUpdate (reactive-element.ts:1261:17) at i._$Ej (reactive-element.ts:1233:25)

Clooos commented 1 month ago

@jerome6994 is it possible that some of your entities are unavailable? Because this error says that the state is undefined in these templates.

Try to remove your templates one by one to see which one are causing these errors.

You can also add a ? after the entity to prevent this, I should add this in my examples:

${hass.states['light.grp_ecl_ch_parents']?.state === 'on' ? '' : 'rgba(57, 54, 70, 1)'} !important;
Clooos commented 1 month ago

This is the error I get in the console:

66bubble-card.js?hacstag=6801129192302:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList') at X (bubble-card.js?hacstag=6801129192302:1:66093) at te.updateBubbleCard (bubble-card.js?hacstag=6801129192302:1:88784) at set hass (bubble-card.js?hacstag=6801129192302:1:88703) at i.value (hui-card.ts:164:27) at i.performUpdate (reactive-element.ts:1329:14) at i.scheduleUpdate (reactive-element.ts:1261:17) at i._$Ej (reactive-element.ts:1233:25)

Thank you this is helpful!

jerome6994 commented 1 month ago

@jerome6994 is it possible that some of your entities are unavailable? Because this error says that the state is undefined in these templates.

Try to remove your templates one by one to see which one are causing these errors.

You can also add a ? after the entity to prevent this, I should add this in my examples:

${hass.states['light.grp_ecl_ch_parents']?.state === 'on' ? '' : 'rgba(57, 54, 70, 1)'} !important;

good evening nothing is impossible I will check because there are not far from 200 devices that move from time to time but normally this room card implementation test is done with viable devices but I check. I could not do it tonight but I will look tomorrow more view on my personal PC to see if still the same or other errors

jerome6994 commented 1 month ago

Good morning So I deleted everything, all traces of bubble card construction on all my tests on all views!

On 2 cards, including a popup, no more particular concerns.

I think it came from the popup map construction I had on my view. I took the video from your Youtube step by step and no more error messages I now have to add all the customization that I had done to see if that changes things or not

I added the ? as mentioned above but I was wondering if it should also be put on:

${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[0]}

For the moment I just did:

${ hass.states['light.grp_ecl_ch_parents'].state === 'on'

in 

${ hass.states['light.grp_ecl_ch_parents']?.state === 'on'

I added the same popup on the two sub-buttons with the red arrow image

I don't know if it comes from the section or the bubble but we can clearly see on the popup card that the + addition of the section card overlaps the popup card image

Doser86 commented 1 month ago

This is the error I get in the console: 66bubble-card.js?hacstag=6801129192302:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList') at X (bubble-card.js?hacstag=6801129192302:1:66093) at te.updateBubbleCard (bubble-card.js?hacstag=6801129192302:1:88784) at set hass (bubble-card.js?hacstag=6801129192302:1:88703) at i.value (hui-card.ts:164:27) at i.performUpdate (reactive-element.ts:1329:14) at i.scheduleUpdate (reactive-element.ts:1261:17) at i._$Ej (reactive-element.ts:1233:25)

Thank you this is helpful!

Figured out anything here?

Clooos commented 1 month ago

I was wondering that anything could be related to the Bubble Card code, I haven't checked yet but you are not the first to show me this error.

Clooos commented 1 month ago

@jerome6994 glad that you don't have errors anymore! Does it fixed you slowness issue?

Your can add a ? here as well:

${hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color[0]}

This will prevent any error if your entity is unavailable again.

For your last issue I have no clue, I don't have this issue on my side.

samuolis commented 1 month ago

Hey,

I don't have any errors in the console, but I have a lot of popups, and my dashboard gets slow to load for the first time in the app.

Also this lag is continuous and even intensifies when I move to the dashboard edit

Clooos commented 1 month ago

Indeed the editor needs to be optimized even more, for your dashboard slowness issue I will have to check if I can optimize them even more 🤞 I only have 10 pop-ups on mine, and I do have a bit of slowness when I open a pop-up but only on older devices (old iPad, Lenovo Thinksmart). On my smartphone and computer it is instant.

samuolis commented 1 month ago

I have a pixel 8 pro, but my dashboard have a lot of modifications and complex custom cards and around 15-20 popups, so getting back to app after a while it just gets stuck until it reloads all dashboard. It is hard to explain, but after refactoring it back to subviews everything loads a lot faster

Clooos commented 1 month ago

In your case this is probably better for now, but I really think that I will be able to fully optimize them at some point.

Edit: have you tried to disable the blurred backdrop? This feature is slowing everything a lot on big setups, I forgot to suggest that. It is disabled on mine.

Doser86 commented 1 week ago

Any update here?

Clooos commented 1 week ago

I will release a new beta version soon, I hope it will make your dashboard faster 🤞

Doser86 commented 1 week ago

For information, I am now running my dashboard on a RPI5 with Emteria Android. This is a little bit faster, but still wery slow. Hope your new beta release make it a little bit faster at least. Like my setup with you pop-up cards. Do not want to go back to normal

Doser86 commented 1 week ago

OMG! Kudos to you! My screen is so responsive after your last beta. Good work! 😁

Clooos commented 1 week ago

I'm so glad to read that! 🎉

I'm working a bit on the editor to makes it faster as well, because the more pop-ups you have, the more it slow down, at least on some setups/browsers.

Happy to be able to close this issue!

Doser86 commented 1 week ago

What did you do? You have no idea how big the difference is! Would like to learn what you are doing

Clooos commented 1 week ago

That was mainly by refactoring some parts of the pop-up code properly, to makes sure that everything only runs when needed. I made so many changes in this v2.3.0 that I don't even remember what was exactly the main cause of the slowness 😅

Doser86 commented 1 week ago

It makes sense. Because id did infect ewerything. Now smooth and beautiful because of you 🤗