Polaris-react: [Collapsible] Accordion animation not smooth

[ry5n]

When animating a Collapsible section, if it has spacing (margin, padding) around the content that is being animated, it causes jank:

Reduced test case: https://codesandbox.io/s/stoic-mirzakhani-v4ino

[alex-page]

I'd be keen to look into this.

This is usually a problem with accordion moving multiple elements below it. This causes a repaint on the entire section and janky animation. We could probably replicate this on a page with a lot of content below an accordion or a page with multiple accordions being triggered by one toggle.

It seems that there is some padding being added when the accordion is open. This padding should probably always be on the child content of the accordion. When the accordion opens the padding would not need to be added.

We also might be able to make this slightly more performant using FLIP.

[johanstromqvist]

I share the assessment. The uneven transition is likely due to two transitions unintentionally happening in sequence, and that there probably are opportunities to prevent jank.

I'd happily pair with you on this @alex-page! We could identify other places where such repaints happen, make that example of perf bottleneck, and develop a UX Dev guideline for transform usage and FLIP.

[ry5n]

For the Better List Filters project, this is something we need to fix ASAP in order to ship, so I’d prefer to tackle this at the project level before broadening scope.

@danrosenthal Could you use the help on diagnosing this?

[sarahill]

Issue with activator height with no badge vs. badge. Need to make a design decision around this.

[ry5n]

Can confirm this is not an issue with the Polaris component, but with the particular design on this project.

[tmlayton]

Doing a bit more digging into this, looks like two issues at hand. The first is related to the badges being present in the selector, the other is animating content with padding (and margins?). Likely, using FLIP would fix the latter.

With badge (project specific issue)

Jank

Jank (reduced test case)

[tmlayton]

I updated this issue to be about addressing the bug in Collapsible and will create another issue about the ListFilters component. Will move this issue out of the ListFilters project.