unmount slides when not displayed

Description

Currently all slides remain in the DOM with display:none when not displayed & the components remain mounted. this means any slides that have components with side effects like animations will continue running, and everything starts going very sloooow.

Proposal

Add a prop to Deck like bufferRange where the content of slides slides +/- that range are mounted in the Dom, but otherwise are unmounted.

[mhink]

First off: you’re absolutely right about Progress, and I’m kind of annoyed at myself for not catching it. 😅

Secondly: your suggestion absolutely holds water. The problems you’re running into most likely have to do with the fact that Slides need to actually render their contents in order to detect “step participants”. Moreover, as you’ve noticed: slides aren’t exactly aware of their location in the presentation- they only know that the Deck addresses them by their slide ID. So the solution is more or less to have the Deck keep track of which slides should be rendered and which slides shouldn’t, and signal them accordingly.

You could technically implement a fix with some creative usage of DeckContext and your HideSlide component, but it’s much easier to implement in-core. So I’m cutting that PR now.

[sneakers-the-rat]

rendering them on first mount of Deck (by adding a || !initialized check) seems to fix the number of steps, and all my custom stepper components work, but now Appear components are broken because they seem to be tied to a specific stepID rather than a step #

edit: confirmed that providing an explicit ‘id’ to Appear fully fixes and everything is way way way way faster