batches: SSBC animated library pane collapse
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.