Add a prop that would disable the expand/collapse animation

[MattChowski]

Hello!

Again, great updates! Love this library!

I would love it if we could have an option to turn off the animations when you expand/collapse an array/object. At the moment they can get a little bit clunky somtimes, for example, i've experienced delays when collapsing single item arrays.

Not a dealbreaker, but would love to have that option to turn them off.

[CarlosNZ]

Sounds reasonable. I might just make the animation time a prop, so you could just set it to 0 to disable it.

[MattChowski]

yeah that sounds like a good idea, thank you for considering!

[CarlosNZ]

At the moment they can get a little bit clunky somtimes, for example, i've experienced delays when collapsing single item arrays.

Just out of interest, would you be able to post a screen capture of the delays you've experienced?

[CarlosNZ]

I will make this a prop, but in the meantime -- the value is stored in a CSS variable (because it's referenced in multiple CSS classes) called --jer-expand-transition-time.

So you can override it yourself just with:

const root  = document.querySelector(':root');
root.style.setProperty('--jer-expand-transition-time', '0s');

(That's what I'll be doing inside the component)

[MattChowski]

Thanks for the solution!

2024-07-22.15-20-47.mov

You can see here when collapsing, there's a small delay when the arrow rotates and the json starts to collapse, it's not a big deal, but it's there. Seems like it's trying to animate a bigger height than it has to?

[CarlosNZ]

Seems like it's trying to animate a bigger height than it has to?

Ha, you got me 😜

There's a problem in that CSS transition doesn't work on the height property when the value of the height is not specified exactly (i.e. height: auto). So I've had to set a maxHeight and make a crude estimate as to its value based on the text content. I'm basically using the technique outlined here: https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0

You can set the max height to something enormous, in which case you get a noticeable delay as it collapses the "unused" height first. But I really don't want to under-estimate the height either, as truncating it would be worse. So I've gone for something of a compromise between the two extremes.

I'm pretty happy with the current setting, but can always modify it if a better technique becomes apparent. But yeah, will make the transition time configurable, that should help.

[CarlosNZ]

Hey @MattChowski -- this is done now in v1.15.2. Thanks for the suggestion.

I've made an issue to have a deeper look at the lag problem and see if I can improve it at some point: #98