Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit Mode slowly becomes crippled with Bubble Card popup on dashboard #698

Open
s1mpleman opened this issue Aug 11, 2024 · 7 comments
Open
Labels
bug Something isn't working

Comments

@s1mpleman
Copy link

s1mpleman commented Aug 11, 2024

Describe the bug
When I have bubble pop ups on my dashboard on the latest home assistant, a fair few I might add, when I click on edit the browser hangs and it takes a while for anything to happen on screen. I think it's specifically when the pop up is used as it doesn't seem to effect the dashboards I've got with just state/slider cards on. Something seems to get stuck, because when I then open the raw configuration all the actions I performed get actioned and multiple edit windows open. I've tried to capture this in the videos included in the issue.

I tested whether it was bubble card or not by completely removing the JS import from the dashboard under resources. The edit dialog returns to it's expected responsiveness.

I'm not entirely sure how to debug this so any additional information you required let me know. I've included two videos of the situation, one with bubble card and one without. Something seems to get stuck and the only thing in the logs is this subscription issue which seems to be something new after searching home assistant issues for it:

home-assistant/frontend#13304
home-assistant/frontend#11132

I get the following for every bubble pop up on screen:
image

This has been happening since I started creating my new dashboard for 2024.8, the edit dialog became progressively sluggish the more bubble pop-ups I used.

To Reproduce
Steps to reproduce the behavior:

Without Bubble Card:

chrome_rcES5ILsMS.mp4

With Bubble Card:

chrome_NR2Xl8MrAQ.mp4
  1. Add a few bubble pop up cards to the dashboard. Fill them with items and watch the dashboard.
  2. Open up the edit dialog, for any other card.
  3. Wait for dialog to eventually open but be very sluggish

Expected behavior
Edit dialog to open not be laggy.

Screenshots
If applicable, add screenshots to help explain your problem.

YAML
If applicable, add any relevant YAML code.

Your code here

Informations (please complete the following information):

  • OS: Android/Windows/Linux
  • Browser/App: App (Android), Browser (Chrome, Brave, Firefox)
  • Bubble Card version: 2.2.1, 2.2.2.beta3
  • Home Assistant version: [e.g. 2024.6.4]

Additional context
Add any other context about the problem here.

Thank you! 🍻

@s1mpleman s1mpleman added the bug Something isn't working label Aug 11, 2024
@s1mpleman
Copy link
Author

s1mpleman commented Aug 11, 2024

Just to add, I think this is related to cache somehow. My laptop is back up to full speed after wiping cache just now but progressively get's worse as I navigate / edit the interface.

My mobile phones are still sluggish but when / how they deide to wipe cache is still a mystery to me. Cache got worse for me + the android app on 2024.7+

@Clooos
Copy link
Owner

Clooos commented Aug 11, 2024

Thank you for your feedback, indeed the editor is currently a bit aggressive on how it handle everything to ensure updates in real time. I have some work to do on that but I will need more time first 😅

@s1mpleman
Copy link
Author

Thank you for your feedback, indeed the editor is currently a bit aggressive on how it handle everything to ensure updates in real time. I have some work to do on that but I will need more time first 😅

Absolutely no rush, for all that fancy GUI there's a "lovely" yaml editor. 😂

Thanks for all the work you do as your card is awesome.

Clooos added a commit that referenced this issue Oct 4, 2024
- [x] Added an option in the editor to revert to the slider previous behavior, in YAML you can add `slider_live_update: true`. #817
- [x] Replaced the select arrow background variable with --bubble-select-arrow-background-color. #794
- [x] You can now change the border CSS of a selected select card with the —bubble-select-border variable. #794
- [x] You can now replace the light color variable with --bubble-light-color, for example on a slider button you can change it like this:

   styles: >-
       ha-card {
           --bubble-light-color: var(--accent-color);
           --bubble-icon-background-color: var(--ha-card-background);
       }
       .bubble-range-fill {
           opacity: 1 !important;
       }
- [x] You can now change the separator line background color with —bubble-line-background-color
- [x] Some styling fixes
- [x] The editor is not freezing anymore on some setups/browsers #799 #698
- [x] Some dropdown menus from some custom cards were not appearing when placed inside of a pop-up, this is now fixed! #469 and #816
- [x] Faster page initialization on some setups
- [x] Significantly lower CPU usage on some setups #799 and maybe #711
- [x] Pop-up `background_update` fixed, try this if you have an issue to display a specific pop-up.
- [x] Pop-ups are now faster (yes again) on some setups.
- [x] Better long term memory management #799
- [x] Better and lighter event listeners system for handling the pop-ups
- [x] Better and lighter global event listeners system for handling the tap actions
- [x] The hold action is now automatically triggered after the delay.
- [x] You can now change the « Slide to close distance » in the pop-up editor
- [x] Fixed an issue on Safari where slider buttons were flashing when a pop-up was opened.
- [x] Fixed? Issue with Media Player Icon (z-index?) appears in front of sticky moving card #823
- [x] fix: recover icon from binary_sensors #828 by @brunosabot
- [x] fix: support Google Wifi Online value as active #829 by @brunosabot
- [x] fix icon variable in cover-card #776 by @Muenchen-Michi 
@Clooos
Copy link
Owner

Clooos commented Oct 4, 2024

Hi, I've worked on this issue in the new beta, can you tell me if it's better now? 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v2.3.0-beta.2

@s1mpleman
Copy link
Author

I will certainly! I've still got the laggy dashboard.

@s1mpleman
Copy link
Author

Hi, I've worked on this issue in the new beta, can you tell me if it's better now? 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v2.3.0-beta.2

This is a quick test on my mobile phone so take this with a pinch of salt.

It's leagues better!

Edit boxes now take about 4-10 seconds to open for the elements I tried. Before they wouldn't open at all unless I did something else on the page.

Once that opens the fields all load in a snappy manor, but I'm getting forced down to the bottom of the preview screen. Not sure if that's bubble-card just thought I'd mention as it's different than before.

I can type information into them and I can open dropdowns and select pages on the vertical-stack ui selectors.

I haven't tried saving yet, that used to hang loads, would sometimes seemingly miss the API response as it did save but I'd have to refresh to get rid of the loading spinner. I'll do a better test on my laptop for you over the weekend. I will record another video for you as well.

I think I might be able to edit that dashboard on the UI from my mobile phones again though so massive thanks! Great timing too as I'm planning a new dashboard and don't have that worry of not being able to do quick edits on my phone.

@Clooos
Copy link
Owner

Clooos commented Oct 4, 2024

Thank you! I'm glad that this is faster for you!

but I'm getting forced down to the bottom of the preview screen. Not sure if that's bubble-card just thought I'd mention as it's different than before.

I'm not sure to understand what is happening here, so don't hesitate to open a new issue for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants