Skip to content

batches: SSBC animated library pane collapse

Warren Gifford requested to merge kr/library-pane-animation into main

Created by: courier-new

Upgrading reactstrap to a version that supports the vertical Collapse property is blocked on upgrading Bootstrap (see https://github.com/sourcegraph/sourcegraph/pull/29400) and will likely not be happening in the near future. Coupled with the fact that we are interested in introducing animation in a number of places in the new SSBC flow, including in the WorkspacesPreview and in page transitions, this felt like an appropriate place to introduce a custom animation instead as an example for future work.

We already had react-spring as a dev dependency for some reason, and react-spring appears to integrate fairly well with react-router for navigation transitions, so this felt like an apt choice.

The library pane adjacent to the editor now has a smooth transition:

https://user-images.githubusercontent.com/8942601/150623310-85a59ba4-b182-4f37-a038-f79c7f07d540.mov

The difficulty with animating things in/out of visibility is, of course, animating the display property, since we do want the hidden library pane to be removed from the DOM flow and made completely inaccessible while it is closed. Though pretty clunky, I was able to find a way to do this with react-spring's API both on-demand and sequentially with the other animations. There might be a better way to do this, but it was not clear from their docs or examples. 🤷‍♀️

Merge request reports

Loading