Option for no transition / improve transition performance

[marcelodavanzo]

My Home Assistant version: 2021.11.1

Fold-entity-row version (FROM BROWSER CONSOLE): 20.0.8

What I am doing: Clicking to unfold a row I see a choppy transition between the collapsed and expanded states.

What I expected to happen: I expected the expansion to happen with a smooth transition; or without any transition as was the previous behaviour.

What happened instead: The expansion occurs over 300ms where the height of the expandable element transitions from collapsed to expanded.

Because fold-entity-row is applying a transition to the height property – and applying transitions to height or width is notorious for creating performance issues as it causes multiple reflows of the page layout during the expansion – the result is a choppy / sluggish animation regardless of device or browser.

It's overall not a great user experience having to wait for things to expand over 300ms, especially if one's frontend relies on multiple expandable elements, and especially if the transition isn't smooth.

thomasloven – On another issue you commented:

You'll have to live with the sluggishness, I'm afraid. It's only 250 milliseconds, and the caret is still fast.

What's the rationale for implementing the transition? And would you be willing to reconsider this? Maybe provide an option for no transition and for those who do want a transition, apply the transition to max-height instead of height over a shorter duration like 80ms as snappier animations tends to be better for this sort of thing.

Thanks for all the great work!

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [x] Have made sure I am using the latest version of the plugin.
• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[thomasloven]

As for the second part of your question, the sentence after the quoted one explains it:

You'll have to live with the sluggishness, I'm afraid. It's only 250 milliseconds, and the caret is still fast. In exchange, you can now have a header that toggles the fold on click, does something else on hold and something third on double click (for rows that support hold_ and double_tap_action natively).

[marcelodavanzo]

So is the transition duration necessary as a timeout for the double click? Not sure I follow.

If that's the case, could the transition still be made performant with the max-height technique?

I understand those are great new features for those who need them, just a bit bummed that there is now a 300ms animation every time I expand something with no way of turning that off in cases where I won't be making use of double click / hold actions. My HA home page relies heavily on fold-entity-rows and it's quite clunky with the latest version.

[thomasloven]

The animation has been there for a long time. What's new is the small delay before the opening starts - if you are using clickable: true and are clicking on the row instead of the open button.

Thanks for the heads-up about the performance issues with transition on height. I'll switch it to max-height instead and consider adjusting the timing. In the mean time you can turn the transition off entirely with card-mod:

type: custom: fold-entity-row
card_mod:
  style: |
    #items {
      transition: none!important;
    }

[thomasloven]

Thanks for making me think about this another round. A double tap action is uncommon enough that the delay should be opt-in.

[marcelodavanzo]

Hey Thomas, thanks for pushing this change so quickly! Performance is much better with max-height and thanks for the heads up on using card-mod to remove the transition, this worked a treat. Cheers!

[thomasloven]

Hey. I just added a no_animation option which is easier to use than the card-mod workaround and not as jerky.